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 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
详解Vue单元测试case写法
May 24 Javascript
浅谈vue权限管理实现及流程
Apr 23 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
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python编程羊车门问题代码示例
2017/10/25 Python
使用python为mysql实现restful接口
2018/01/05 Python
python删除不需要的python文件方法
2018/04/24 Python
python写入已存在的excel数据实例
2018/05/03 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python opencv读mp4视频的实例
2018/12/07 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
小学数学课后反思
2014/04/23 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
中学音乐课教学反思
2016/02/18 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
JS数组去重详情
2021/11/07 Javascript