javascript實現(xiàn)滾動效果的數(shù)字時鐘實例
更新時間：2016年07月21日 12:04:28 投稿：daisy
這篇文章主要是介紹使用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)文章
其實，沒那么強大的，不過，聊勝于無吧，并且還算管用，要是有誰再完善它就好了……2009-04-04
Node.js：Windows7下搭建的Node.js服務(wù)(來玩玩服務(wù)器端的javascript吧,這可不是前端js插件
什么是Node.js?還服務(wù)器端javascript?對于這個概念我在這篇文章不做解釋，可以自己去搜索了解下，服務(wù)器端js不是新技術(shù)，只是最近的node.js的火爆讓他爆發(fā)了，我會在以后的文章里解釋什么是node.js。2011-06-06
javascript中去除數(shù)組重復元素的實現(xiàn)方法【實例】
下面小編就為大家?guī)硪黄猨avascript中去除數(shù)組重復元素的實現(xiàn)方法【實例】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04
uniapp開發(fā)小程序的開發(fā)規(guī)范總結(jié)
uni-app 是一個使用 vue.js 開發(fā)跨平臺應用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)小程序的開發(fā)規(guī)范,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
JS中的回調(diào)函數(shù)(callback)講解
回調(diào)函數(shù)是一段可執(zhí)行的代碼段，它作為一個參數(shù)傳遞給其他的代碼，其作用是在需要的時候方便調(diào)用這段（回調(diào)函數(shù)）代碼,這篇文章主要介紹了JS中的?回調(diào)函數(shù)（callback）,需要的朋友可以參考下2022-12-12
下面小編就為大家?guī)硪黄狫S判斷是否在微信瀏覽器打開的簡單實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
在JavaScript中replace函數(shù)作為字符串替換函數(shù)，這是一個威力強大的字符串操作函數(shù)，對于常見字符串操作的推薦用法。這篇隨筆就來更加深入的理解它。2013-03-03
這篇文章主要介紹了JS簡單判斷函數(shù)是否存在的方法,涉及javascript函數(shù)運行與類型判定相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2017-02-02
今天小編就為大家分享一篇解決layui彈框失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
IE6與IE7中，innerHTML獲取param的區(qū)別
最近，在用一些web編輯器，發(fā)現(xiàn)插入一段mp3后，查看源代碼，object標簽中的param都被刪除。下面我演示給大家看看。2009-03-03