基于Javascript實現倒計時功能

2019-11-20 10:32:37

字體：大中小

來源：轉載

供稿：網友

本文實例實現一個倒計時功能. 倒計時功能, 用在項目的發布時間, 或者某個活動做倒計時等等的突出時間功能的方面.
界面代碼結構,先要完成好. 這個界面我就不做那么美觀了,湊合就行(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);

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