简单实现js倒计时功能


Posted in Javascript onFebruary 13, 2017

本文实例为大家分享了js倒计时的具体代码,主要使用了JS的Date对象和定时器setInterval,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
 <head> 
 <title> 倒计时 </title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta name="Generator" content="EditPlus"> 
 <meta name="Author" content=""> 
 <meta name="Keywords" content=""> 
 <meta name="Description" content=""> 
 </head> 
<script> 
var timstr= '2020-09-03'; 
var _timer; 
 
//页面加载完成之后执行 
window.onload = function() 
{ 
 timerfunc();//调用定时器 
 document.getElementById('timSpan').innerHTML = timstr; //将目标时间输出 
} 
 
//定时器方法 
timerfunc = function(){ 
 _timer = setInterval('tfunc()',1000);//生成定时器 
} 
 
//时间处理方法 
tfunc = function(){ 
 var ntim = new Date(); //当前时间戳 
 var _tm = timstr.replace(/-/g,'\/'); //目标时间字段串里的-替换成/,格式化的需要 
 var ftim = new Date(_tm); //格式化目标时间 
 var rs = timGap(ntim.getTime(),ftim.getTime()); //调用取时间差方法 
 var _str = rs.d+'天'+rs.h+'小时'+rs.m+'分钟'+rs.s+'秒'; //将返回的数据拼接字符串 
 document.getElementById('gap').innerHTML = _str; //输出 
} 
 
//取时间差方法 
timGap = function(ntim,ftim){ 
 var date3 = ftim - ntim; //时间差值毫秒数 
 
 var days = Math.floor(date3/(24*3600*1000)); //取天数 
 
 
 var level1 = date3%(24*3600*1000);//取天数后剩下的毫秒数 
 var hours = Math.floor(level1/(3600*1000)); //取小时数 
 
 var level2 = level1%(3600*1000);//取小时后剩下的毫秒数 
 var minutes = Math.floor(level2/(60*1000));//取分钟 
 
 var level3 = level2%(60*1000);//取分钟后剩下的毫秒数 
 var seconds = Math.floor(level3/1000);//取秒 
 
 //定义对象 
 var tim = {}; 
 //赋值 
 tim['d'] = days; 
 tim['h'] = hours; 
 tim['m'] = minutes; 
 tim['s'] = seconds; 
 //console.log(tim); 
 return tim; //返回数据 
} 
</script> 
 <body> 
 <div>距离<span id="timSpan"></span>还有 <span id="gap"></span></div> 
 </body> 
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
JavaScript中操作字符串小结
May 04 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
SVG实现时钟效果
Jul 17 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
JavaScript实现简单动态表格
Dec 02 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 #Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 #Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 #Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 #Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 #Javascript
Vue.js实现简单动态数据处理
Feb 13 #Javascript
JavaScript获取select中text值的方法
Feb 13 #Javascript
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
12个非常有用的JavaScript技巧
2017/05/17 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
python 数据加密代码
2008/12/24 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
详解Python文件修改的两种方式
2019/08/22 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
2014厂务公开实施方案
2014/02/17 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年民政工作总结
2014/11/26 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android