简单实现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 相关文章推荐
json数据的列循环示例
Sep 06 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
javascript操作表格排序实例分析
May 06 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
vue界面发送表情的实现代码
Sep 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 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
PHP云打印类完整示例
2016/10/15 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
详解php用static方法的原因
2018/09/12 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python函数和模块的使用总结
2019/05/20 Python
Python print不能立即打印的解决方式
2020/02/19 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
自我评价格式
2014/01/06 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
财务审计整改报告
2014/11/06 职场文书
实习工作表现评语
2014/12/31 职场文书
销售员自我评价
2015/03/11 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL