50天50个案例02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./3.css">
</head>
<body>
<div class="column">
<div>0</div>
<div>1</div>
<div>2</div>
</div>
<div class="column">
<div class="num">0</div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
</div>
<div class="colon"></div>
<div class="column">
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
<div class="num">9</div>
</div>
<div class="column">
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
<div class="num">9</div>
</div>
<div class="colon"></div>
<div class="column">
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
</div>
<div class="column">
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">4</div>
<div class="num">5</div>
<div class="num">6</div>
<div class="num">7</div>
<div class="num">8</div>
<div class="num">9</div>
</div>
<script src="./3.js"></script>
</body>
</html>
@import url("http://fonts.googleapis.com/css?family=Jura:200,300,400,500,600,700,800,900");
/* 引入Jura字体 */
*{
margin: 0;
padding: 0;
}
/* 清除内外边距 */
body{
background-color: #0e141b;
color: #e0e6eb;
font-family: 'Jura';
font-weight: 300;
text-align: center;
letter-spacing: 8px;
overflow: hidden;
}
.column,.colon{
/* 行内块元素 */
display: inline-block;
font-size: 86px;
line-height: 86px;
/* 顶部对齐 */
vertical-align: top;
}
.column{
/* 设置过渡 */
transition: 0.3s;
}
/* 冒号 */
.colon{
/* 垂直居中 */
transform: translateY(calc(50vh - 55px));
/* 过渡 */
transition: 0.3s;
}
.colon::after{
content: ":";
}
/* 数字默认样式 */
.num{
opacity: 0.25;
transition: 0.5s;
}
/* 当时间（正中间数字） */
.num.visible{
opacity: 1;
text-shadow: 1px 1px 0 #2c6299;
}
/* 邻近的 */
.num.near{
opacity: 0.35;
}
/* 远的 */
.num.far{
opacity: 0.15;
}
/* 更远的（越远越透明） */
.num.distant{
opacity: 0.1;
}// 单个数字的垂直偏移量
let size = 86;
// 把所有的.column转为数组
let columns = Array.from(document.getElementsByClassName('column'));
// 样式名数组
let class_list = ['visible', 'near', 'far', 'far', 'distant', 'distant'];
// true=24小时制，false=12小时制
let is_24_hour_clock = true;
// 获取时分秒
function getClock() {
let d = new Date();
let hour = is_24_hour_clock ? d.getHours() : d.getHours() % 12 || 12;
hour = hour < 10 ? '0' + hour : hour;
let minute = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
let second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
return hour + '' + minute + '' + second;
}
/// 获取对应的样式名
function getClass(n, i) {
return class_list.find(function (_class, class_index) {
return i - class_index === n || i + class_index === n;
}) || '';
}
//定时器 ，一秒执行一次
setInterval(() => {
// 获取时间
let c = getClock();
// 遍历所有.column
columns.forEach(function (ele, i) {
// 获取时分秒的每一位数，并转为整型
let n = parseInt(c[i]);
// 计算偏移量
let offset = -n * size;
// 设置每一位数的位置
ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + (size / 2) + 'px))';
// 接下来设置样式
// 将.column的子元素（.num）转为数组，并遍历它
Array.from(ele.children).forEach(function(ele2,i2){
// 设置每一位数的样式（透明度改变）
ele2.className='num '+getClass(n,i2);
})
})
}, 1100);
