简单实现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制作的可折叠弹出式菜单示例
Apr 04 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
React 高阶组件入门介绍
Jan 11 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
jquery实现轮播图特效
Apr 12 jQuery
VSCode搭建React Native环境
May 07 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/10/09 PHP
在PHP中使用灵巧的体系结构
2006/10/09 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python  logging日志打印过程解析
2019/10/22 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
《值日生》教学反思
2014/02/17 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android