简单实现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中offset()方法用法实例
Jan 16 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
vue.js开发环境搭建教程
May 04 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
Web应用开发TypeScript使用详解
May 25 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
杏林同学录(八)
2006/10/09 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
php递归实现无限分类的方法
2015/07/28 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
python错误处理详解
2014/09/28 Python
Python定时器线程池原理详解
2020/02/26 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
秘书英文求职信范文
2014/01/31 职场文书
经典演讲稿开场白
2014/08/25 职场文书
刘公岛导游词
2015/02/05 职场文书
员工年度工作总结2015
2015/05/18 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python