如何使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表功能-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了如何使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表功能，內(nèi)容簡(jiǎn)而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會(huì)有收獲的，下面讓小編帶大家一起來(lái)看看吧。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出興海免費(fèi)做網(wǎng)站回饋大家。

效果圖展示，感覺(jué)不錯(cuò)可以參考實(shí)例代碼。

如何使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表功能

具體代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div>00:00:00:00</div>
 <button>開(kāi)始</button>
 <button disabled>暫停</button>
 <button disabled>繼續(xù)</button>
 <button disabled>重置</button>

 <script>
//定義一個(gè)變量，根據(jù)定時(shí)器每秒執(zhí)行一次，每次執(zhí)行++自增操作，變量存儲(chǔ)的數(shù)值，就會(huì)每秒+1?，F(xiàn)在需要的記錄效果是每0.01秒，也就是10毫秒執(zhí)行一次。根據(jù)累計(jì)的數(shù)值執(zhí)行進(jìn)位。如果毫秒達(dá)到100就是1秒，如果秒達(dá)到60就是1分鐘，如果分鐘達(dá)到60就是1小時(shí)

  var ms = 0; // 毫秒
  var s = 0; // 秒
  var m = 0; // 分鐘
  var h = 0; // 小時(shí)

  // 單獨(dú)定義存儲(chǔ)時(shí)、分、秒、毫秒的字符串的變量來(lái)存儲(chǔ)累加時(shí)間的執(zhí)行結(jié)果，因?yàn)槿绻苯釉趍s、s、m、h變量上進(jìn)行拼接操作，會(huì)影響++操作的執(zhí)行  
  var msStr = '';
  var sStr = '';
  var mStr = '';
  var hStr = '';

  // 因?yàn)槎〞r(shí)器是定義在函數(shù)內(nèi)部，必須定義一個(gè)全局變量來(lái)存儲(chǔ)定時(shí)器，在函數(shù)外部可以調(diào)用終止定時(shí)器
  var time = 0;

  // 獲取div標(biāo)簽對(duì)象
  var oDiv = document.querySelector('div');

  // 獲取按鈕的標(biāo)簽對(duì)象
  var oStart = document.querySelectorAll('button')[0]; // 開(kāi)始
  var oPause = document.querySelectorAll('button')[1]; // 暫停
  var oCont = document.querySelectorAll('button')[2]; //繼續(xù)
  var oReset = document.querySelectorAll('button')[3]; // 重置

  // 給四個(gè)按鈕添加點(diǎn)擊事件效果
  
  // 開(kāi)始按鈕
  oStart.onclick = function(){
   // 點(diǎn)擊開(kāi)始按鈕執(zhí)行函數(shù)，執(zhí)行秒表計(jì)時(shí)
   setTimeStr();
   // 可以點(diǎn)暫停
   oPause.disabled = false;
   // 其他標(biāo)簽都不能點(diǎn)
   oStart.disabled = true;
   oCont.disabled = true;
   oReset.disabled = true;
  }

  // 暫停按鈕
  oPause.onclick = function(){
   // 點(diǎn)擊暫停按鈕,清除定時(shí)器,終止秒表執(zhí)行
   clearInterval(time);
   // 暫停本身和開(kāi)始不能點(diǎn)
   oPause.disabled = true;
   oStart.disabled = true;
   // 繼續(xù)和重置能點(diǎn)了
   oCont.disabled = false;
   oReset.disabled = false;
  }

  // 繼續(xù)按鈕
  oCont.onclick = function(){
   // 點(diǎn)擊繼續(xù)按鈕，繼續(xù)執(zhí)行定時(shí)器
   setTimeStr();
   // 暫停可以點(diǎn)
   oPause.disabled = false;
   // 其他都不能點(diǎn)
   oCont.disabled = true;
   oReset.disabled = true;
   oStart.disabled = true;
  }


  // 重置按鈕
  oReset.onclick = function(){
   // 點(diǎn)擊重置按鈕,將所有的數(shù)據(jù)都恢復(fù)到0的狀態(tài)
   // 所有變量存儲(chǔ)的數(shù)據(jù)都是0, div中的內(nèi)容也恢復(fù)到0   
   // 定義所有存儲(chǔ)時(shí)間的變量存儲(chǔ)的數(shù)值為0 
   ms = 0; // 毫秒
   s = 0; // 秒
   m = 0; // 分鐘
   h = 0; // 小時(shí)
   // 將div中的內(nèi)容,設(shè)定為初始狀態(tài)的00:00:00:00內(nèi)容
   oDiv.innerHTML = '00:00:00:00';
   // 開(kāi)始可以點(diǎn)
   oStart.disabled = false;
   // 其他都不能點(diǎn)
   oPause.disabled = true;
   oCont.disabled = true;
   oReset.disabled = true;
  }

  // 每次點(diǎn)擊開(kāi)始按鈕或者繼續(xù)按鈕都會(huì)調(diào)用執(zhí)行函數(shù)，都會(huì)生成一個(gè)新的定時(shí)器。time中存儲(chǔ)的是當(dāng)前這個(gè)新的定時(shí)器，是整個(gè)程序中定時(shí)器的序號(hào)
  // 例如點(diǎn)擊開(kāi)始按鈕10次會(huì)生成10個(gè)定時(shí)，time中存儲(chǔ)最后一個(gè)定時(shí)器的序號(hào)10
  // 當(dāng)點(diǎn)擊暫停按鈕時(shí)，清除的是time中存儲(chǔ)的序號(hào)是10的這一個(gè)定時(shí)器，之前 1-9定時(shí)器仍然會(huì)執(zhí)行  
  // 解決方法：點(diǎn)擊開(kāi)始按鈕之后，在點(diǎn)擊暫停按鈕之前，禁止再次點(diǎn)擊開(kāi)始按鈕。也就是在清除原有定時(shí)器之前，不允許生成新的定時(shí)器

  // 定義函數(shù)，這個(gè)函數(shù)的作用就是記錄執(zhí)行的時(shí)間，有小時(shí)、分鐘、秒、毫秒 4個(gè)部分。將記錄的時(shí)間寫入到div中，div中起始時(shí)默認(rèn)都是0
  function setTimeStr(){  
   // 賦值操作,將定時(shí)器,存儲(chǔ)在全局作用域變量中
   // 此處只是賦值操作
   time = setInterval(function(){
    ms++;
    // 毫秒是10毫秒一增加
    // ms存儲(chǔ)的數(shù)值如果達(dá)到100，就是1秒種了
    // 給秒單位進(jìn)位 s++ 
    // ms本身需要重新開(kāi)始記錄數(shù)值
    // 0:0:0:99 ---> 0:0:1:00
    if(ms == 100){
     s++;  // 秒進(jìn)位
     ms = 0; // ms本身清零,重新記錄
    }

    if(s == 60){
     m++;  // 分鐘進(jìn)位 
     s = 0;  // s秒 清零
    }

    if(m == 60){
     h++;  // 小時(shí)進(jìn)位 
     m = 0;  // m分鐘 清零
    }

    // 小時(shí)記錄可以每24小時(shí)清零一次，或者100小時(shí)清零一次，都可以
    if(h == 100){
     h = 0;
    }

    // 如果記錄的時(shí)間小于0，要做補(bǔ)零操作
    if(ms < 10){
     msStr = '0' + ms;
    }else{
     msStr = ms;
    }

    if(s < 10){
     sStr = '0' + s;
    }else{
     sStr = s;
    }

    if(m < 10){
     mStr = '0' + m;
    }else{
     mStr = m;
    }

    if(h < 10){
     hStr = '0' + h;
    }else{
     hStr = h;
    }
    // 每次執(zhí)行返回一個(gè)記錄時(shí)間的字符串，將這個(gè)字符串寫入到div中
    oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;
   } , 10);  
   console.log(time);
  } 
 </script>
</body>
</html>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：如何使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表功能-創(chuàng)新互聯(lián)
文章起源：http://jinyejixie.com/article0/diegoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)秒表功能-創(chuàng)新互聯(lián)