javascript實(shí)現(xiàn)滾動(dòng)效果的數(shù)字時(shí)鐘實(shí)例
網(wǎng)上關(guān)于javascript實(shí)現(xiàn)數(shù)字時(shí)鐘效果的實(shí)例很多,但是本文給大家介紹的是滾動(dòng)效果的數(shù)字時(shí)鐘。小編覺得效果很炫,下面分享給大家。
先來(lái)看看很炫的效果
下面是代碼實(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ù)字時(shí)鐘滾動(dòng)效果" /></li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時(shí)鐘滾動(dòng)效果" /></li> <li>:</li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時(shí)鐘滾動(dòng)效果" /></li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時(shí)鐘滾動(dòng)效果" /></li> <li>:</li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時(shí)鐘滾動(dòng)效果" /></li> <li><img src="img/num.png" alt="javascript很炫的數(shù)字時(shí)鐘滾動(dòng)效果" /></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實(shí)現(xiàn)滾動(dòng)效果的數(shù)字時(shí)鐘的全部實(shí)例代碼,代碼很簡(jiǎn)單但是效果非常好,希望能幫助到有需要的你。
- javascript實(shí)現(xiàn)數(shù)字時(shí)鐘效果
- vue.js實(shí)現(xiàn)帶日期星期的數(shù)字時(shí)鐘功能示例
- JS+CSS實(shí)現(xiàn)滾動(dòng)數(shù)字時(shí)鐘效果
- js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)字時(shí)鐘效果
- 使用JS顯示倒計(jì)時(shí)數(shù)字時(shí)鐘效果
- JS 實(shí)現(xiàn)倒計(jì)時(shí)數(shù)字時(shí)鐘效果【附實(shí)例代碼】
- JS實(shí)現(xiàn)的網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果
- javascript數(shù)字時(shí)鐘示例分享
- html5 canvas js(數(shù)字時(shí)鐘)實(shí)例代碼
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)數(shù)字時(shí)鐘
相關(guān)文章
不用AJAX和IFRAME,說(shuō)說(shuō)真正意義上的ASP+JS無(wú)刷新技術(shù)
注明:以下方法都經(jīng)過(guò)實(shí)例和開發(fā)的長(zhǎng)期驗(yàn)證,其實(shí)這些技術(shù)早就有,今天只不過(guò)自己歸納一下2008-09-09完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(一)
這篇文章主要為大家詳細(xì)介紹如何完美實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03基于JavaScript實(shí)現(xiàn)快速轉(zhuǎn)換文本語(yǔ)言(繁體中文和簡(jiǎn)體中文)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)快速切換正體中文和簡(jiǎn)體中文,需要的朋友可以參考下2016-03-03js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
JQuery有很多這樣的插件,但本文的這個(gè)是跟著自己的想法寫的,也不知道他人是如何實(shí)現(xiàn)的,感興趣的朋友可以了解下2014-01-01基于JS代碼實(shí)現(xiàn)實(shí)時(shí)顯示系統(tǒng)時(shí)間
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)實(shí)時(shí)顯示系統(tǒng)時(shí)間的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06微信小程序如何設(shè)置基本的頁(yè)面樣式,做出用戶界面UI
這篇文章主要介紹了微信小程序如何設(shè)置基本的頁(yè)面樣式,做出用戶界面UI。如何為這個(gè)頁(yè)面添加樣式,使它看上去更美觀,教大家寫出實(shí)際可以使用的頁(yè)面。2022-12-12js將json格式的對(duì)象拼接成復(fù)雜的url參數(shù)方法
下面小編就為大家?guī)?lái)一篇js將json格式的對(duì)象拼接成復(fù)雜的url參數(shù)方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05前端進(jìn)階JS數(shù)組高級(jí)用法大全教程示例
這篇文章主要為大家介紹了前端進(jìn)階JS數(shù)組高級(jí)用法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07