转载

Javascript实现倒计时功能

接着上一篇文章, 我们这次来实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面.

界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~).

Javascript实现倒计时功能

<!DOCTYPE html> <html> <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_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实现倒计时功能

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=207 ,欢迎大家传播与分享.

原文  http://www.wutongwei.com/front/infor_showone.tweb?id=207
正文到此结束
Loading...