简单实现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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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的面试题集
2006/11/19 PHP
php批量删除数据
2007/01/18 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
onpropertypchange
2006/07/01 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
Python与Redis的连接教程
2015/04/22 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python中yield的用法详解
2021/01/13 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
办理暂住证介绍信
2014/01/11 职场文书
加工操作管理制度
2014/01/19 职场文书
四风自我剖析材料
2014/09/30 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL