js實現動態(tài)時鐘
更新時間：2020年03月12日 07:46:00 作者：林西相心
這篇文章主要為大家詳細介紹了js實現動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現動態(tà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時鐘特效專題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
淺析C/C++,Java,PHP,JavaScript,Json數組、對象賦值時最后一個元素后面是否可以帶逗號
這篇文章主要介紹了淺析C/C++,Java,PHP,JavaScript,Json數組、對象賦值時最后一個元素后面是否可以帶逗號的相關資料,需要的朋友可以參考下2016-03-03
按照W3C的說明，String對象的replace方法調用方式是stringObject.replace(regexp/substr,replacement)。2011-12-12
這篇文章主要介紹了微信小程序實現的自定義分享功能,結合實例形式分析了微信小程序自定義分享功能的原理與簡單實現技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了JavaScript 中判斷變量是否為數字的示例代碼,代碼簡單易懂對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
最近由于需要我們將相關id的重復的去掉，一個是客戶端一個后臺程序把關，這里分享下js的去重復id的實現代碼2013-07-07
淺談通過JS攔截 pushState和replaceState事件
下面小編就為大家?guī)硪黄獪\談通過JS攔截 pushState和replaceState事件。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
僅相隔一天就出了個v3。 修正了一個bug，firefox左側內容寬度錯誤。2009-02-02
上一篇的目的只是讓大家簡單的理解自定事件是如何模擬出來的，大家不難發(fā)現會有很多缺陷,本篇主要已解決上一篇的問題為主，感興趣的朋友可以參考，或許本文對你有所幫助2013-02-02
這篇文章主要介紹了Javascript實用方法之json合并,jQuery 的“extend()”方法有兩個原型：合并的方法,分別是淺合并和深度合并，本文通過代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了js實現特別簡單的鐘表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09