简单实现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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
详解vue 数据传递的方法
Apr 19 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
关于vue的列表图片选中打钩操作
Sep 09 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 随机数的深入理解
2013/06/05 PHP
深入理解PHP中的global
2014/08/19 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
javascript String 对象
2008/04/25 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
python实现端口转发器的方法
2015/03/13 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python版名片管理系统
2018/11/30 Python
详解Python sys.argv使用方法
2019/05/10 Python
Django框架视图介绍与使用详解
2019/07/18 Python
python实现堆排序的实例讲解
2020/02/21 Python
django 模型中的计算字段实例
2020/05/19 Python
自动化专业毕业生自荐信
2013/11/01 职场文书
初三物理教学反思
2014/01/21 职场文书
网络教育自我鉴定
2014/02/04 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
楚门的世界观后感
2015/06/03 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
nginx安装以及配置的详细过程记录
2021/09/15 Servers