js實現(xiàn)動態(tài)時鐘
更新時間：2020年03月12日 07:46:00 作者：林西相心
這篇文章主要為大家詳細介紹了js實現(xiàn)動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)動態(tài)時鐘的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<title>時鐘</title>
</head>
<script type="text/javascript">
function todou(n){
if(n<10){
return '0'+n;
}
else {
return ''+n;
}
}
window.onload=function(){
setInterval(function(){
var date = new Date();
var ma = document.getElementsByTagName('img');
var str =todou(date.getHours())+todou(date.getMinutes())+todou(date.getSeconds());
for(var i=0;i<ma.length;i++){
ma[i].src='images/'+str[i]+'.png';
}
// alert(todou(date.getSeconds()));
// var date = new Date();
//alert(todou(date.getSeconds()));
} ,1000)
}
</script>
<body>
<div style="background: grey;color: red; text-align: center;font-size: 100px;" >
<img src="images/0.png" width="100px" height="90px">
<img src="images/0.png" width="100px" height="90px">
時
<img src="images/0.png" width="100px" height="90px">
<img src="images/0.png" width="100px" height="90px">
分
<img src="images/0.png" width="100px" height="90px">
<img src="images/0.png" width="100px" height="90px">
秒
</div>
</body>
</html>
示例展示：
更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺析C/C++,Java,PHP,JavaScript,Json數(shù)組、對象賦值時最后一個元素后面是否可以帶逗號
這篇文章主要介紹了淺析C/C++,Java,PHP,JavaScript,Json數(shù)組、對象賦值時最后一個元素后面是否可以帶逗號的相關(guān)資料,需要的朋友可以參考下2016-03-03
按照W3C的說明，String對象的replace方法調(diào)用方式是stringObject.replace(regexp/substr,replacement)。2011-12-12
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的自定義分享功能,結(jié)合實例形式分析了微信小程序自定義分享功能的原理與簡單實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
JavaScript 中判斷變量是否為數(shù)字的示例代碼
這篇文章主要介紹了JavaScript 中判斷變量是否為數(shù)字的示例代碼,代碼簡單易懂對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
最近由于需要我們將相關(guān)id的重復(fù)的去掉，一個是客戶端一個后臺程序把關(guān)，這里分享下js的去重復(fù)id的實現(xiàn)代碼2013-07-07
淺談通過JS攔截 pushState和replaceState事件
下面小編就為大家?guī)硪黄獪\談通過JS攔截 pushState和replaceState事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
僅相隔一天就出了個v3。 修正了一個bug，firefox左側(cè)內(nèi)容寬度錯誤。2009-02-02
上一篇的目的只是讓大家簡單的理解自定事件是如何模擬出來的，大家不難發(fā)現(xiàn)會有很多缺陷,本篇主要已解決上一篇的問題為主，感興趣的朋友可以參考，或許本文對你有所幫助2013-02-02
這篇文章主要介紹了Javascript實用方法之json合并,jQuery 的“extend()”方法有兩個原型：合并的方法,分別是淺合并和深度合并，本文通過代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)特別簡單的鐘表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09