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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
原生js实现放大镜特效
Mar 08 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
vue3中的组件间通信
Mar 31 Vue.js
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
基于Zookeeper的使用详解
2013/05/02 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
javascript 正则表达式相关应介绍
2012/11/27 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python对一个数向上取整的实例方法
2020/06/18 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
技校生自我鉴定
2013/12/08 职场文书
保险经纪人求职信
2014/03/11 职场文书
工程承诺书怎么写
2014/05/24 职场文书
建设工地安全标语
2014/06/07 职场文书
大学生标准自荐书
2014/06/15 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
环保证明
2015/06/23 职场文书
2016党员党课心得体会
2016/01/07 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers