基於Javascript實現倒計時功能

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 基於Javascript實現倒計時功能

基於Javascript實現倒計時功能

編輯：關於JavaScript

本文實例實現一個倒計時功能. 倒計時功能, 用在項目的發布時間, 或者某個活動做倒計時等等的突出時間功能的方面.
界面代碼結構,先要完成好. 這個界面我就不做那麼美觀了,湊合就行(O(∩_∩)O哈哈~).

代碼名稱

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒計時實現</title>
  <style>
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #countdown {
      font-size: 50px;;
      width: 350px;
      margin: 0 auto;
      background-image: none;
      color: #fff;
      padding: 100px;
      font-weight: bolder;
    }
    #countdown ul {
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    #countdown ul li{
      display: inline-block;
      margin-left: 10px;
    }
    #countdown ul li:last-child {
      margin-right: 10px;
    }

    #countdown ul li strong {
      text-shadow: 5px 5px 5px #000;
    }
    #countdown ul li strong, #countdown ul li span {
      display: block;
      text-align: center;
    }
    #sec {
      color: #ff0000;
      text-shadow: 5px 5px 2px #ff0000;
    }
  </style>
</head>
<body>
  <div id="countdown">
    <ul>
      <li>
        <strong id="day">00</strong>
        <span>天</span>
      </li>
      <li>:</li>
      <li>
        <strong id="hour">00</strong>
        <span>時</span>
      </li>
      <li>:</li>
      <li>
        <strong id="min">00</strong>
        <span>分</span>
      </li>
      <li>:</li>
      <li>
        <strong id="sec">00</strong>
        <span>秒</span>
      </li>
    </ul>
  </div>
</body>
</html>

下面做Javascript的講解了.

首先設定一個結束時間,時間通過new Date()來進行創建. 這樣才能夠計算倒計時的時間.

//結束時間
var t_endtime = new Date("2016-05-22 00:00:00");

然後就是換算規則,規則的換算是常理了.

// 時間換算規則
var t_day = 60 * 60 * 24;
var t_hour = 60 * 60;
var t_min = 60;

再次就是通過setInterval來計算當前時間的對比, 因為時間在一秒一秒的過去, 當前時間的獲取就在setInterval中進行計算. 當然還得將計算出的結果顯示到界面上.

var ele_day = document.getElementById("day");
var ele_hour = document.getElementById("hour");
var ele_min = document.getElementById("min");
var ele_sec = document.getElementById("sec");

setInterval(function () {
  //獲取當前時間
  var t_currenttime = new Date();
  //結束時間 - 當前時間 = 剩余時間
  var t_result = t_endtime.getTime() - t_currenttime.getTime();

  //剩余時間換算
  var t_time = Math.floor( t_result / 1000 );
  var t_result_day = Math.floor( t_time / t_day );
  var t_result_hour = Math.floor( t_time % t_day / t_hour);
  var t_result_min = Math.floor(t_time % t_day % t_hour/ t_min);
  var t_result_sec = Math.floor( t_time % t_day % t_hour % t_min);

  // 將時間小於10的,在值前面加入0;
  if ( t_result_day < 10) {
    t_result_day = "0" + t_result_day;
  }

  if ( t_result_hour < 10) {
    t_result_hour = "0" + t_result_hour;
  }

  if ( t_result_min < 10) {
    t_result_min = "0" + t_result_min;
  }

  if ( t_result_sec < 10) {
    t_result_sec = "0" + t_result_sec;
  }

  //顯示到頁面上
  ele_day.textContent = t_result_day;
  ele_hour.textContent = t_result_hour;
  ele_min.textContent = t_result_min;
  ele_sec.textContent = t_result_sec;

}, 1000);

很簡單, 一個倒計時功能就完成了.

以上就是本文的全部內容，希望對大家的學習有所幫助。

關於JavaScript

JS 對象屬性相關(檢查屬性、枚舉屬性等): 1.刪除屬性delete運算符可以刪除對象的屬性復制代碼代碼如下:delete person.ag
javascript之querySelector和querySelectorAll使用介紹: 一開始很多人都會拿jquery的選擇器來跟這兩個api做對比（我也是），比較異同本來沒事，但卻使一些
BootStrap Table 獲取同行不同列元素的方法: 表格同行中存在元素的相互調用，如何保證元素能夠被同行不同列的其他方框使用，方法如下：頁面元素示例如下

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章