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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
JavaScript 创建对象
Jul 17 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 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
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
ExtJS 入门
2010/10/29 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
python创建和使用字典实例详解
2013/11/01 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
python实现图片批量压缩程序
2018/07/23 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
《湘夫人》教学反思
2014/02/21 职场文书
平安工地建设方案
2014/05/06 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
社区工作者个人总结
2015/02/28 职场文书
生死抉择观后感
2015/06/09 职场文书
金榜题名主持词
2015/07/02 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js