基于Javascript实现倒计时功能
2016-02-22 08:44
801 查看
本文实例实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面.
界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(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);
很简单, 一个倒计时功能就完成了.
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js可突破windows弹退效果代码
- Delphi实现毫秒级别的倒计时实例代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- javascript 宝宝出生倒计时实现代码
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- node.js抓取并分析网页内容有无特殊内容的js文件
- PHP+JS实现大规模数据提交的方法