首頁 > 開發者 > 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);
很簡單, 一個倒計時功能就完成了.
以上就是本文的全部內容，希望對大家的學習有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
