Without further ado, just upload the code
<!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 = ('.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++){ ((1-i)*height); }; function NumberBox() {} = { init : function () { var innerHTML = "<div class='box' id='box"+num+"'><ul>" = num; num++; for(var i =0,l=timeNum[];i<l;i++){ innerHTML += "<li style='color:"+colors[i]+"'>"+i+"</li>"; } innerHTML += "</ul><div>" += innerHTML; if(num==2||num==4){ += "<div class='colon'>:</div>"} }, dominit : function(){ = [].(('box'+).getElementsByTagName('li'),0); (function(dom,i){ = position[i] + "px"; = "top .8s"; }) = true; }, toNum : function (n) { if(!){();} n = ""+n; var p = this; var l = -1; while([1].innerHTML!=n){ (()); } (function (dom,i) { = (i==l)?"-1":"1"; = position[i] + "px"; }) } } for(var i=0;i<6;i++){ var o = new NumberBox(); (); (o); } function getTime() { var time = new Date(); return (""+Fixed2(())+Fixed2(())+Fixed2(())).split(""); } function Fixed2(n){ return Number(n)<10?"0"+n:n; } (function () { var time = getTime(); (function(obj,i){ (time[i]); }); setTimeout(,1000); })() })(); </script> </body> </html>
The above simple implementation (example explanation) of js digital sliding clock is all the content I share with you. I hope you can give you a reference and I hope you can support me more.