快捷導(dǎo)航

js倒計(jì)時(shí)小實(shí)例（多次定時(shí)）

更新時(shí)間：2016年12月08日 16:01:57 作者：小朋友663

這篇文章主要介紹了js實(shí)現(xiàn)可多次定時(shí)的倒計(jì)時(shí)小實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一個(gè)簡(jiǎn)單的js計(jì)時(shí)函數(shù)（多次定時(shí)）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  h1{text-align:center;font-size:40px;}
 </style>
</head>
<body>
 <h1 id="number">
  <!-- 倒計(jì)時(shí)還有 01時(shí)01分01秒 -->
 </h1>
 <script>
  //設(shè)置倒計(jì)時(shí)的時(shí)間范圍
  var seconds = 1000;

  //手工調(diào)用計(jì)時(shí)函數(shù)
  timeRun();

  //定時(shí)調(diào)用函數(shù)
  var timer = setInterval(timeRun, 1000);

  //倒計(jì)時(shí)函數(shù)
  function timeRun(){
   //獲取 h1
   var h1 = document.getElementById('number');
   //判斷
   if (seconds <= 0) {
    h1.innerHTML = "Game Over";
    h1.style.fontSize = "120px";
    clearInterval(timer);
    return;
   }
   //計(jì)算 秒數(shù) 里面包含的小時(shí)數(shù)
   var h = Math.floor(seconds / 3600);
   //計(jì)算剩下的秒數(shù)
   var s = seconds - h * 3600;
   //在從剩下的秒數(shù)中 取出 分鐘
   var m = Math.floor(s / 60);
   //計(jì)算剩下的秒數(shù)
   s -= m * 60; 

   //處理數(shù)字 <10的數(shù)字前加0
   h = (h<10)?'0'+h:h;
   m = (m<10)?'0'+m:m;
   s = (s<10)?'0'+s:s;

   //拼接字符串
   var message = "倒計(jì)時(shí)還有 "+h+'時(shí)'+m+'分'+s+'秒';
   //把字符串輸出到h1中
   h1.innerHTML = message;

   //秒數(shù)減少
   seconds --;
  }
 </script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

TypeScript字符串的常用操作總結(jié)
這篇文章主要為大家詳細(xì)介紹了TypeScript中字符串的常用操作，例如substring、indexOf、slice、replace等，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-08-08
JS如何判斷瀏覽器類型和詳細(xì)區(qū)分IE各版本瀏覽器
本篇文章主要介紹了JS判斷瀏覽器類型和詳細(xì)區(qū)分IE各版本瀏覽器的代碼，非常具有實(shí)用價(jià)值，有興趣的可以了解一下。
2017-03-03
JS運(yùn)動(dòng)改變單物體透明度的方法分析
這篇文章主要介紹了JS運(yùn)動(dòng)改變單物體透明度的方法,結(jié)合實(shí)例形式分析了頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
簡(jiǎn)單了解JavaScript中常見的反模式
這篇文章主要介紹了簡(jiǎn)單了解JavaScript中常見的反模式，反模式是指對(duì)反復(fù)出現(xiàn)的設(shè)計(jì)問題的常見的無(wú)力而低效的設(shè)計(jì)模式，俗話說就是重蹈覆轍。這篇文章描述了 JavaScript 中常見的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下
2019-06-06
IE6已終止操作問題的2種情況及解決
打開某個(gè)頁(yè)面時(shí)，彈出提示框“Internet Explorer無(wú)法打開Internet 站，經(jīng)過一番奮戰(zhàn)，利用排除法解決了問題，共發(fā)現(xiàn)2種情況
2014-04-04
element-ui組件中input等的change事件中傳遞自定義參數(shù)
這篇文章主要介紹了element-ui組件中的input等的change事件中傳遞自定義參數(shù)的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
javascript對(duì)中文按照拼音排序代碼
將中文編入數(shù)組，調(diào)用數(shù)組的sort方法，再用到一個(gè)localeCompare即可實(shí)現(xiàn)中文排序,需要的朋友可以參考下
2014-08-08
JavaScript中的alert()函數(shù)使用技巧詳解
這篇文章主要介紹了JavaScript中的alert()函數(shù)使用技巧詳解,本文講解了普通彈出、帶換行的文本、使用制表符、使用變量、使用樣式等選擇,需要的朋友可以參考下
2014-12-12
iframe窗口高度自適應(yīng)的實(shí)現(xiàn)方法
這篇文章主要介紹了iframe窗口高度自適應(yīng)的實(shí)現(xiàn)方法，有需要的朋友可以參考一下
2014-01-01
javascript密碼強(qiáng)度校驗(yàn)代碼（兩種方法）
為了保證網(wǎng)站個(gè)人信息的安全，很多網(wǎng)站在注冊(cè)頁(yè)面都設(shè)置密碼強(qiáng)度這項(xiàng)，用javascript如何實(shí)現(xiàn)密碼強(qiáng)度校驗(yàn)代碼呢？下面小編給大家整理了兩種方法使用javascript密碼強(qiáng)度校驗(yàn)代碼，有需要的朋友可以參考下
2015-08-08