简单实现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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
redux.js详解及基本使用
May 24 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 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+JS+rsa数据加密传输实现代码
2011/03/23 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python每天必学之bytes字节
2016/01/28 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python 以16进制打印输出的方法
2018/07/09 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
七年级政治教学反思
2014/02/03 职场文书
希特勒的演讲稿
2014/05/23 职场文书
圣诞节开幕词
2015/01/29 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
CSS极坐标的实例代码
2021/06/03 HTML / CSS
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
基于Python编写一个监控CPU的应用系统
2022/06/25 Python