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中的函数
Jan 22 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JQuery球队选择实例
May 18 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 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
一个程序下载的管理程序(三)
2006/10/09 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
js获取Get值的方法
2016/09/29 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
python实现网站的模拟登录
2016/01/04 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python3 深浅copy对比详解
2019/08/12 Python
python exit出错原因整理
2020/08/31 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
移动通信专业自荐信范文
2013/11/12 职场文书
2014年师德承诺书
2014/05/23 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
安全检查汇报材料
2014/12/26 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android