- 获取日期字符
- 添加日期对应结构运动
- 数值显示动态透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div class="wrapper">
<div class="column">
<div>0</div>
<div>1</div>
<div>2</div>
</div>
<div class="column ten"></div>
<div class="coln">:</div>
<div class="column six"></div>
<div class="column ten"></div>
<div class="coln">:</div>
<div class="column six"></div>
<div class="column ten"></div>
</div>
<script src="./jquery.js"></script>
<script src="./demo.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: #0e141b;
overflow: hidden;
}
.wrapper {
width: 100%;
text-align: center;
}
.wrapper .column,
.wrapper .coln {
display: inline-block;
color: rgba(224, 230, 230, 0.89);
vertical-align: top;
font-size: 86px;
line-height: 86px;
font-weight: 300;
}
.columu {
transition: all 300ms ease-in;
}
.coln {
transform: translateY(calc(50vh - 43px));
}
.visible {
opacity: 1;
}
.close {
opacity: 0.35;
}
.far {
opacity: 0.15;
}
.distance {
opacity: 0.1;
}
function Index(dom, use24Hours) {
this.column = Array.from(dom);
this.use24Hours = use24Hours;
this.createDom();
this.start();
this.classList = ['visible', 'close', 'far', 'far', 'distance', 'distance'];
};
Index.prototype.start = function () {
var self = this;
setInterval(function () {
var c = self.getClock();
self.column.forEach(function (ele, index) {
var n = +c[index];
var offset = n * 86;
$(ele).css({
'transform': 'translateY(calc(50vh - ' + offset + 'px - 43px))'
});
Array.from(ele.children).forEach(function (ele2, index2) {
var className = self.getClass(n, index2);
$(ele2).attr('class', className);
})
})
}, 500);
};
Index.prototype.getClass = function (n, i) {
var className = this.classList.find(function (ele, index) {
return i - index === n || i + index === n;
});
return className || '';
}
Index.prototype.getClock = function () {
var d = new Date();
return [this.use24Hours ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
return p + ('0' + n).slice(-2);
}, '')
};
Index.prototype.createDom = function () {
for (var i = 0; i < 6; i++) {
var oDiv = '<div>' + i + '</div>';
$('.six').append(oDiv);
}
for (var i = 0; i < 10; i++) {
var iDiv = '<div>' + i + '</div>';
$('.ten').append(iDiv);
}
};
new Index($('.column'), true);