JS Digital Sliding Clock:
<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style type="Text/css">Body,ul{margin:0;p adding: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: -%;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>class="content"> </div> <script type="Text/javascript">(function () {varcolors = ["#69D2E7","#E20049","#19215E","#F38630","#FA6900","#FF4E50","#F9D423","#FFB6FF","#474168","#6ACAFC"]; varContent = Document.queryselector ('. Content'); varnum =0; varHeight = -; varMaxHeight = (2-num) *height; varTimenum = [3,Ten,6,Ten,6,Ten]; varPosition = []; varNumberboxs = []; for(vari =0;i<Ten; i++) {Position.push (1-I.) *height); }; function Numberbox () {} Numberbox.prototype={init:function () {varInnerHTML ="<div class= ' box ' id= ' box"+num+"' ><ul>" This. num =num; Num++; for(vari =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; 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); } function GetTime () {varTime =NewDate (); return(""+fixed2 (Time.gethours ()) +fixed2 (Time.getminutes ()) +fixed2 (Time.getseconds ())). Split (""); } function Fixed2 (n) {returnNumber (n) <Ten?"0"+N. } (function () {varTime =GetTime (); Numberboxs.foreach (function (obj,i) {obj.tonum (time[i]); }); SetTimeout (Arguments.callee, +); })() })(); </script></body>JS Digital Sliding Clock