简单实现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 相关文章推荐
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
jQuery拖动图片删除示例
May 10 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 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中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
javascript插入样式实现代码
2012/02/22 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python集合操作方法详解
2020/02/09 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
综合测评自我鉴定
2013/10/08 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
离婚协议书范本
2015/01/26 职场文书
故宫的导游词
2015/01/31 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书