JS實現(xiàn)HTML頁面中動態(tài)顯示當(dāng)前時間完整示例

更新時間：2018年07月30日 12:07:50 作者：時光不顧

這篇文章主要介紹了JS實現(xiàn)HTML頁面中動態(tài)顯示當(dāng)前時間,結(jié)合完整實例形式分析了JavaScript使用時間函數(shù)setTimeout及clearTimeout動態(tài)顯示當(dāng)前時間相關(guān)操作技巧,非常簡單實用,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)HTML頁面中動態(tài)顯示當(dāng)前時間。分享給大家供大家參考，具體如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.dhdzp.com JS動態(tài)顯示時間</title>
  <script>
    var timer=null;
    function displayClock(num){//num是傳入的startClock中的動態(tài)值
      if(num<10){
        return "0"+num;
      }
      else{
        return num;
      }
    }
    //停止計時
    function stopClock(){
      clearTimeout(timer);
    }
    //開始計時
    function startClock(){
      var time =new Date();
      var hours=displayClock(time.getHours())+":";
      var minutes=displayClock(time.getMinutes())+":";
      var seconds=displayClock(time.getSeconds());
      //顯示時間
      show.innerHTML=hours+minutes+seconds;//在id為show的塊區(qū)域顯示
      timer=setTimeout("startClock()",1000);//延時器
    }
  </script>
</head>
<style>
  #show{
    font-size: 24px;
    color:#4213C9;
    text-align:center;
  }
  </style>
<body onload="startClock()" onunload="stopClock()">
  <div id="show"></div>
</body>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun，測試運(yùn)行效果如下：

PS：這里再為大家推薦幾款時間及日期相關(guān)工具供大家參考使用：

在線日期/天數(shù)計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期計算器/相差天數(shù)計算器：
http://tools.jb51.net/jisuanqi/datecalc

在線日期天數(shù)差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

Unix時間戳(timestamp)轉(zhuǎn)換工具：
http://tools.jb51.net/code/unixtime

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

盤點7個簡單但棘手的JavaScript面試問題分析
這篇文章主要為大家介紹了盤點7個簡單但棘手的JavaScript面試問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
解決layui頁面按鈕點擊無反應(yīng),也不報錯的問題
今天小編就為大家分享一篇解決layui頁面按鈕點擊無反應(yīng),也不報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript html5 canvas畫布中刪除一個塊區(qū)域的方法
這篇文章主要介紹了JavaScript html5 canvas畫布中刪除一個塊區(qū)域的方法,涉及JavaScript結(jié)合html5操作canvas畫布圖形繪制的技巧,需要的朋友可以參考下
2016-01-01
詳解如何在Canvas上實現(xiàn)坐標(biāo)定位
這篇文章我們將來詳細(xì)的給大家講解一下如何在 canvas 上實現(xiàn)坐標(biāo)的定位,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下
2023-08-08
JS實現(xiàn)前端緩存的方法
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)前端緩存的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
js 判斷附件后綴的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 判斷附件后綴的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流詳解
這篇文章的內(nèi)容是說說最近在工作中遇到過的常見的問題。主要是關(guān)于JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流，文中由一個常見的問題開始展開，一步步的介紹解決的方法，有需要的朋友們下面來跟著小編一起看看吧。
2016-12-12
微信小程序用戶授權(quán)獲取手機(jī)號（getPhoneNumber）
這篇文章主要給大家介紹了關(guān)于微信小程序用戶授權(quán)獲取手機(jī)號的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
詳解JavaScript中l(wèi)ocalStorage使用要點
localStorage主要用來替代cookie，解決cookie(可參考cookie使用要點)讀寫困難、容量有限的問題，對js localstorage的使用相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
使用requestAnimationFrame實現(xiàn)js動畫性能好
requestAnimationFrame優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API，在運(yùn)行時瀏覽器會自動優(yōu)化方法的調(diào)用，并且如果頁面不是激活狀態(tài)下的話，動畫會自動暫停，有效節(jié)省了CPU開銷，這篇文章給大家詳細(xì)介紹使用requestAnimationFrame實現(xiàn)js動畫
2015-08-08