简单实现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 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
微信小程序实现tab左右切换效果
Nov 15 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
vue实现扫码功能
Jan 17 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 Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
用python找出那些被“标记”的照片
2017/04/20 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
django 模型中的计算字段实例
2020/05/19 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
大学社团活动策划书
2014/01/26 职场文书
幼儿园运动会口号
2014/06/07 职场文书
营销总监岗位职责
2014/09/16 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript