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 01 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
使用layui的router来进行传参的实现方法
Sep 06 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代码
2006/12/06 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
PHP连接access数据库
2015/03/27 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
js实现表格筛选功能
2017/01/18 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python文件和目录操作详解
2015/02/08 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
培训科主任岗位职责
2014/08/08 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL