基于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）;

很简单, 一个倒计时功能就完成了.

以上就是本文的全部内容，希望对大家的学习有所帮助。