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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 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
解析coreseek for sphinx的使用
2013/06/21 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
javascript拖拽应用实例(二)
2016/03/25 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
2016/08/06 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
django框架创建应用操作示例
2019/09/26 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
文艺晚会主持词
2014/03/24 职场文书
励志演讲稿范文
2014/04/29 职场文书
市政管理求职信范文
2014/05/07 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
十八大标语口号
2014/10/09 职场文书
商务代表岗位职责
2015/02/15 职场文书
后勤个人工作总结
2015/02/28 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
centos7安装mysql5.7经验记录
2022/05/02 Servers
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android