简单实现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 相关文章推荐
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
JS实现音乐导航特效
Jan 06 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 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
Laravel 5 学习笔记
2015/03/06 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
JSON取值前判断
2014/12/23 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
班级聚会策划书
2014/01/16 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
语文复习计划
2015/01/19 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
html5调用摄像头实例代码
2021/06/28 HTML / CSS
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
Nginx的基本概念和原理
2022/03/21 Servers
把77A收信机改造成收音机
2022/04/05 无线电