微客导航 » 文章资讯 » js数字滑动时钟的简单实现(示例讲解)

js数字滑动时钟的简单实现(示例讲解)

2023-09-26 14:10:05 252

废话不多说，直接上代码





Document

body,ul{margin:0;padding:0;}
.content{margin:100pxauto;width:1000px;}
.box{position:relative;float:left;width:50px;height:120px;overflow:hidden;}
.boxli{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;}

(function(){ varcolors=["#69D2E7","#E20049","#19215E","#F38630","#FA6900","#FF4E50","#F9D423","#FFB6FF","#474168","#6ACAFC"]; varcontent=document.querySelector('.content'); varnum=0; varheight=120; varmaxheight=(2-num)*height; vartimeNum=[3,10,6,10,6,10]; varposition=[]; varNumberBoxs=[]; for(vari=0;i<10;i++){ position.push((1-i)*height); }; functionNumberBox(){} NumberBox.prototype={ init:function(){ varinnerHTML="

"+i+""; } innerHTML+="

" content.innerHTML+=innerHTML; if(num==2||num==4){content.innerHTML+=":

"} }, 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; varp=this; varl=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(vari=0;i<6;i++){ varo=newNumberBox(); o.init(); NumberBoxs.push(o); } functiongetTime(){ vartime=newDate(); return(""+Fixed2(time.getHours())+Fixed2(time.getMinutes())+Fixed2(time.getSeconds())).split(""); } functionFixed2(n){ returnNumber(n)<10?"0"+n:n; } (function(){ vartime=getTime(); NumberBoxs.forEach(function(obj,i){ obj.toNum(time[i]); }); setTimeout(arguments.callee,1000); })() })();

以上这篇js数字滑动时钟的简单实现(示例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js数字滑动时钟的简单实现(示例讲解)

热门推荐

随机推荐