快捷導(dǎo)航

js實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘

更新時(shí)間：2020年03月12日 07:46:00 作者：林西相心

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
 <title>時(shí)鐘</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">
  時(shí)
 <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時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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