还在使用静态时钟？？
程序员文章站
2022-03-11 09:49:47
...
还在用静态时钟？？？
动态漂亮时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: brown;
overflow: hidden;
}
.wrapper{
width: 100%;
text-align: center;
}
.wrapper .colum,
.wrapper .coln{
display: inline-block; /*默认基于底部对齐*/
color: white;
vertical-align: top; /*基于顶部对齐*/
font-size: 60px;
line-height: 60px;
font-weight: 300;
}
.colum{
transition: all 300ms ease-in;
}
.coln{
transform: translateY(calc(50vh - 30px)); /*占50%-30*/
}
.visible{
opacity: 1;
}
.close{
opacity: 0.35;
}
.far{
opacity: 0.15;
}
.distance{
opacity: 0.12;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="colum">
<div>0</div>
<div>1</div>
<div>2</div>
</div>
<div class="colum ten"></div>
<div class="coln">:</div>
<div class="colum six"></div>
<div class="colum ten"></div>
<div class="coln">:</div>
<div class="colum six"></div>
<div class="colum ten"></div>
</div>
</body>
<script src="jquery-3.4.1.min.js"></script>
<script>
//20:46:15
$(function(){
function Index(dom,use24Hours){
this.colum = Array.from(dom);
this.use24Hour = use24Hours;
this.classList = ['visible','close','far','far','distance','distance','distance'];
this.createDom();
this.start();
};
Index.prototype.start = function(){
var self = this;
setInterval(function(){
var c = self.getClock();
self.colum.forEach(function(ele,index){
var n = + c[index];
var offset = n * 60;
$(ele).css({
'transform':'translateY(calc(50vh - '+ offset +'px - 30px))'
});
Array.from(ele.children).forEach(function(ele2,index2){
var className = self.getClass(n,index2);
$(ele2).attr('class',className);
})
})
},500)
};
Index.prototype.getClass = function(n,index2){
var className = this.classList.find(function(ele,index){
return index2 - index === n || index2 + index === n;
})
return className || '';
}
//获得当前时间并处理
Index.prototype.getClock = function(){
var d = new Date();
return [this.use24Hour ? d.getHours() : d.getHours() % 12 || 12,d.getMinutes(),d.getSeconds()].reduce(function(p,n){ //reduce数组的一个方法 es6
return p + ('0'+n).slice(-2);
},'')
}
//动态生成dom结构
Index.prototype.createDom = function(){ //prototype
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($('.colum'),true);
})
</script>
</html>