There are many examples of JavaScript implementing digital clock effects on the Internet, but this article introduces you to the digital clocks with scrolling effects. The editor thinks the effect is very impressive, so I will share it with you below.
Let's take a look at the dazzling effects first
Below is a code example
JavaScript code part:
window.onload=function(){function toDou(n){return n<10?"0"+n:""+n;}var oImg=document.getElementsByTagName("img");setInterval(clock,1000);clock()function clock(){var oDate=new Date();var oH=oDate.getHours();var oF=oDate.getMinutes();var oM=oDate.getSeconds();var str=toDou(oH)+toDou(oF)+toDou(oM);for(var i=0;i<oImg.length;i++){move(oImg[i],{"marginTop":-35*str.charAt(i)});}}}}div+css layout part:
<ul><li><img src="img/num.png" /></li><li><img src="img/num.png" /></li><li>:</li><li><img src="img/num.png" /></li><li><img src="img/num.png" /></li><li><img src="img/num.png" /></li></ul>*{ padding:0; margin:0; list-style:none;}ul{width:200px; margin: 100px auto;}li{ float:left; height:35px; overflow:hidden; line-height:35px;}Summarize
The above is all the example codes about digital clocks that use javascript to achieve scrolling effects. The code is simple but the effect is very good. I hope it can help you in need.