基于Javascript实现倒计时功能_javascript技巧
程序员文章站
2022-04-10 17:04:51
...
本文实例实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面.
界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~).
界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~).
代码名称
倒计时实现
- 00 天
- :
- 00 时
- :
- 00 分
- :
- 00 秒
下面做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
很简单, 一个倒计时功能就完成了.
以上就是本文的全部内容,希望对大家的学习有所帮助。
上一篇: CSS实现书签图案的效果
推荐阅读
-
JS实现点击链接取消跳转效果的方法_javascript技巧
-
js实现屏蔽默认快捷键调用自定义事件示例_javascript技巧
-
js Li来实现的效果_javascript技巧
-
js实现鼠标感应向下滑动隐藏菜单的方法_javascript技巧
-
理解Javascript_07_理解instanceof实现原理_javascript技巧
-
js实现动态改变字体大小代码_javascript技巧
-
javascript 文本框水印/占位符(watermark/placeholder)实现方法_javascript技巧
-
JavaScript实现的XML与JSON互转功能详解
-
js实现网站首页图片滚动显示_javascript技巧
-
从URL中提取参数与将对象转换为URL查询参数的实现代码_javascript技巧