js精准的倒计时函数分享


Posted in Javascript onJune 29, 2016

先看看倒计时效果:

 js精准的倒计时函数分享

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>倒计时函数</title>
 <script>
 var timer=(function(){
 return function (json){
 if(json.currentTime){
 var now=new Date();
 var year=now.getFullYear();//返回年份(4位数字)
 var month=now.getMonth()+1;//返回月份(0-11,所以+1)
 var day=now.getDate();//返回某天(1-31)
 var h=now.getHours();//返回小时(0-23)
 var m=now.getMinutes();//返回分钟(0-59)
 var s=now.getSeconds();//返回秒数(0-59)
 //补O
 m=m<10?'0'+m:m;
 s=s<10?'0'+s:s;
 var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
 document.getElementById(json.objId).innerHTML=year+'年'+month+'月'+day+'日'+weekday[now.getDay()]+' '+h+':'+m+':'+s;
 setTimeout(function(){timer(json)},1000);
 }else{
 var endtime=new Date(json.endtime);//结束时间
 var nowtime = new Date();//当前时间
 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //计算差的秒数
 //一天24小时 一小时60分钟 一分钟60秒
 d=parseInt(lefttime/3600/24);
 h=parseInt((lefttime/3600)%24);
 m=parseInt((lefttime/60)%60);
 s=parseInt(lefttime%60);
 document.getElementById(json.objId).innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
 if(lefttime>0){setTimeout(function(){timer(json)},1000);}
 }
 }
 })()
 
 window.onload=function(){
 timer({
 currentTime:true,
 objId:'thisTime'
 })
 timer({
 objId:'countDown',
 endtime:"2016/9/1,18:00"
 })
 }
 </script>
</head>
<body>
 <b>当前时间:</b> <span id="thisTime"></span><br/><br/>
 <b>距离2016/9/1 18:00还有:</b> <span id="countDown"></span>
</body>
</html>

注意点:
 1.有两个功能:当前时间和倒计时,带的参数不同
 2.主要是利用js返回的数据,要注意月份,某天,小时,分钟,返回的数值区间
 3.星期的我这边用数组处理了
 4.倒计时主要是计算时间差,结束时间减去当前时间的秒数,在进行数学计算
 5.这里用了闭包,防止多个定时器冲突
 6.这边的代码比较易懂,牛人可以改造成插件,还望分享分享。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
layui实现数据分页功能
Jul 27 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 #Javascript
RequireJS多页面应用实例分析
Jun 29 #Javascript
全面了解JS中的匿名函数
Jun 29 #Javascript
大型JavaScript应用程序架构设计模式
Jun 29 #Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 #Javascript
JavaScript中闭包的写法和作用详解
Jun 29 #Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 #Javascript
You might like
Terran剧情介绍
2020/03/14 星际争霸
大师制作的中短波矿石收音机
2020/04/02 无线电
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
JavaScript 乱码问题
2009/08/06 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
Move.js入门
2017/02/08 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python File(文件) 方法整理
2019/02/18 Python
Python: 传递列表副本方式
2019/12/19 Python
为什么相对PHP黑python的更少
2020/06/21 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
心得体会开头
2014/01/01 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
项目战略合作意向书
2015/05/08 职场文书
创业计划书之宠物店
2019/09/19 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis