js倒計時小實例（多次定時）

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

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

一個簡單的js計時函數(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">
  <!-- 倒計時還有 01時01分01秒 -->
 </h1>
 <script>
  //設(shè)置倒計時的時間范圍
  var seconds = 1000;

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

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

  //倒計時函數(shù)
  function timeRun(){
   //獲取 h1
   var h1 = document.getElementById('number');
   //判斷
   if (seconds <= 0) {
    h1.innerHTML = "Game Over";
    h1.style.fontSize = "120px";
    clearInterval(timer);
    return;
   }
   //計算 秒數(shù) 里面包含的小時數(shù)
   var h = Math.floor(seconds / 3600);
   //計算剩下的秒數(shù)
   var s = seconds - h * 3600;
   //在從剩下的秒數(shù)中 取出 分鐘
   var m = Math.floor(s / 60);
   //計算剩下的秒數(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 = "倒計時還有 "+h+'時'+m+'分'+s+'秒';
   //把字符串輸出到h1中
   h1.innerHTML = message;

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

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