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 传统事件模型构造的事件监听器实现代码
May 31 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python中的闭包用法实例详解
2015/05/05 Python
Python日期的加减等操作的示例
2017/08/15 Python
python中time、datetime模块的使用
2020/12/14 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
自荐书范文
2013/12/08 职场文书
硕士生工作推荐信
2014/03/07 职场文书
安全生产责任书范本
2014/04/15 职场文书
学校安全责任书范本
2014/07/23 职场文书
技能培训通讯稿
2015/07/18 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
导游词之沈阳植物园
2019/11/30 职场文书