javascript小時、分鐘和秒倒數計時效果

antzone發表於2017-04-10
JavaScript

本章節分享一段程式碼例項，它實現了小時、分鐘和秒的倒數計時效果。

這樣的效果應用其實非常的廣泛的，比如考試倒數計時，商城搞活動倒數計時。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" language="javascript">
//總時間，以分為單位
var time = 100;
//小時
var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0;
//分
var m = time % 60;
//秒
var s = 60;
//輸出到當前Script的Dom位置
document.write('<span>限時秒殺，還剩餘<font id="f_hh">'
+ h + '</font>小時<font id="f_mm">'
+ m + '</font>分<font id="f_ss">'
+ s + '</font>秒</span>');
//開始執行倒數計時
var timeInterval = setInterval(function () {
//如果時、分、秒都為0時將停止當前的倒數計時
if (h == 0 && m == 0 && s == 0) { clearInterval(timeInterval); return; }
  //當秒走到0時，再次為60秒
  if (s == 0) { s = 60; }
  if (s == 60) {
    //每次當秒走到60秒時，分鐘減一
    m -= 1;
    //當分等於0時並且小時還多餘1個小時的時候進裡面看看
    if (m == 0 && h > 0) {
      //小時減一
      h -= 1;
      //分鐘自動預設為60分
      m = 60;
      //秒自動預設為60秒
      s = 60;
    }
  }
  //秒繼續跳動，減一
  s -= 1;
  //小時賦值
  document.getElementById('f_hh').innerHTML = h;
  //分鐘賦值
  document.getElementById('f_mm').innerHTML = m;
  //秒賦值
  document.getElementById('f_ss').innerHTML = s;
}, 1000);
</script>
</head>
<body>
 
</body>
</html>

相關文章