js数字滑动时钟的简单实现(示例讲解)
程序员文章站
2022-05-14 19:18:02
废话不多说，直接上代码
废话不多说，直接上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
body,ul{margin:0;padding: 0;}
.content{margin:100px auto;width: 1000px;}
.box{position: relative;float: left;width: 50px;height: 120px;overflow: hidden;}
.box li{position: absolute;left: 0;width:100%;height: 120px;list-style:none;font-size:80px;font-weight: bold;background-color: #fff; line-height: 120px; text-align: center;}
.colon{float: left;height: 120px;font-size: 80px;color: #e91e63;font-weight: bold;line-height: 100px;}
</style>
</head>
<body>
<div class="content">
</div>
<script type="text/javascript">
(function(){
var colors = ["#69d2e7", "#e20049", "#19215e", "#f38630", "#fa6900", "#ff4e50", "#f9d423", "#ffb6ff", "#474168", "#6acafc"];
var content = document.queryselector('.content');
var num = 0;
var height = 120;
var maxheight = (2-num)*height;
var timenum = [3,10,6,10,6,10];
var position = [];
var numberboxs = [];
for(var i =0;i<10;i++){
position.push((1-i)*height);
};
function numberbox() {}
numberbox.prototype = {
init : function () {
var innerhtml = "<div class='box' id='box"+num+"'><ul>"
this.num = num;
num++;
for(var i =0,l=timenum[this.num];i<l;i++){
innerhtml += "<li style='color:"+colors[i]+"'>"+i+"</li>";
}
innerhtml += "</ul><div>"
content.innerhtml += innerhtml;
if(num==2||num==4){content.innerhtml += "<div class='colon'>:</div>"}
},
dominit : function(){
this.ali = [].slice.call(document.getelementbyid('box'+this.num).getelementsbytagname('li'),0);
this.ali.foreach(function(dom,i){
dom.style.top = position[i] + "px";
dom.style.transition = "top .8s";
})
this.hasdom = true;
},
tonum : function (n) {
if(!this.hasdom){this.dominit();}
n = ""+n;
var p = this;
var l = p.ali.length-1;
while(p.ali[1].innerhtml!=n){
p.ali.unshift(p.ali.pop());
}
p.ali.foreach(function (dom,i) {
dom.style.zindex = (i==l)?"-1":"1";
dom.style.top = position[i] + "px";
})
}
}
for(var i=0;i<6;i++){
var o = new numberbox();
o.init();
numberboxs.push(o);
}
function gettime() {
var time = new date();
return (""+fixed2(time.gethours())+fixed2(time.getminutes())+fixed2(time.getseconds())).split("");
}
function fixed2(n){
return number(n)<10?"0"+n:n;
}
(function () {
var time = gettime();
numberboxs.foreach(function(obj,i){
obj.tonum(time[i]);
});
settimeout(arguments.callee,1000);
})()
})();
</script>
</body>
</html>
以上这篇js数字滑动时钟的简单实现(示例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。