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)文章
通過seajs實現(xiàn)JavaScript的模塊開發(fā)及按模塊加載
seajs實現(xiàn)了JavaScript 的 模塊開發(fā)及按模塊加載。用來解決繁瑣的js命名沖突，文件依賴等問題，其主要目的是令JavaScript開發(fā)模塊化并可以輕松愉悅進行加載。下面我們來一起深入學(xué)習(xí)下吧2019-06-06
這篇文章主要介紹了JavaScript截取字符串的2個函數(shù)介紹,它們分別是substring和substr函數(shù),本文用實例講解了它們的用法,需要的朋友可以參考下2014-08-08
js處理層級數(shù)據(jù)結(jié)構(gòu)的方法小結(jié)
本文主要介紹了js處理層級數(shù)據(jù)結(jié)構(gòu)的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
js一般方法改寫成面向?qū)ο蠓椒ǖ臒o限級折疊菜單示例代碼
本例是應(yīng)用別人的例子，原來那位老兄是用一般方法寫成的無限級折疊菜單，通過了一些簡化修改，將原來的例子改成了面向?qū)ο蟮姆绞?/div> 2013-07-07
今天小編就為大家分享一篇SSM+layUI 根據(jù)登錄信息顯示不同的頁面方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS 實現(xiàn)獲取驗證碼 倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例（前端組件化）
這篇文章主要介紹了使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例（前端組件化）本文重點講解如何從0搭建一個組件系統(tǒng)，在這里我們會學(xué)習(xí)使用JSX來建立markup 的風(fēng)格，我們基于與React 一樣的 JSX 去建立我們組件的風(fēng)格2021-04-04
這篇文章主要為大家詳細介紹了原生js實現(xiàn)自定義滾動條組件的開發(fā)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
用javascript將數(shù)據(jù)導(dǎo)入Excel示例代碼
將數(shù)據(jù)導(dǎo)入Excel的方法有很多，本例介紹的這個是使用js來實現(xiàn)數(shù)據(jù)的導(dǎo)入，感興趣的朋友可以了解下2014-09-09
JavaScript?Promise多并發(fā)問題的解決方法詳解
提起控制并發(fā),大家應(yīng)該不陌生,這篇文章主要來和大家介紹一下JavaScript如何解決Promise多并發(fā)問題,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09最新評論