简单实现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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
永不消失的title提示代码
Feb 15 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
js+css实现打字效果
Jun 24 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 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
10个实用的PHP代码片段
2011/09/02 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
告诉大家什么是JSON
2008/06/10 Javascript
javascript css float属性的特殊写法
2008/11/13 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
python显示生日是星期几的方法
2015/05/27 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
车间班组长岗位职责
2013/11/13 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
Python中requests库的用法详解
2022/06/05 Python