javascript實現(xiàn)滾動效果的數(shù)字時鐘實例
網(wǎng)上關(guān)于javascript實現(xiàn)數(shù)字時鐘效果的實例很多,但是本文給大家介紹的是滾動效果的數(shù)字時鐘。小編覺得效果很炫,下面分享給大家。
先來看看很炫的效果
下面是代碼實例
javascript代碼部分:
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布局部分:
<ul> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時鐘滾動效果" /></li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時鐘滾動效果" /></li> <li>:</li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時鐘滾動效果" /></li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時鐘滾動效果" /></li> <li>:</li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時鐘滾動效果" /></li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時鐘滾動效果" /></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;}
總結(jié)
以上就是關(guān)于用javascript實現(xiàn)滾動效果的數(shù)字時鐘的全部實例代碼,代碼很簡單但是效果非常好,希望能幫助到有需要的你。
相關(guān)文章
不用AJAX和IFRAME,說說真正意義上的ASP+JS無刷新技術(shù)
注明:以下方法都經(jīng)過實例和開發(fā)的長期驗證,其實這些技術(shù)早就有,今天只不過自己歸納一下2008-09-09基于JavaScript實現(xiàn)快速轉(zhuǎn)換文本語言(繁體中文和簡體中文)
這篇文章主要介紹了基于JavaScript實現(xiàn)快速切換正體中文和簡體中文,需要的朋友可以參考下2016-03-03js將json格式的對象拼接成復雜的url參數(shù)方法
下面小編就為大家?guī)硪黄猨s將json格式的對象拼接成復雜的url參數(shù)方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05