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 相关文章推荐
JS 面向对象的5钟写法
Jul 31 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
浅谈微信小程序flex布局基础
Sep 10 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
vue-cli3全面配置详解
Nov 14 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP开发注意事项总结
2015/02/04 PHP
CentOS安装php v8js教程
2015/02/26 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
关于JS中的闭包浅谈
2013/08/23 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
Python实现多线程下载文件的代码实例
2014/06/01 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
标准化管理实施方案
2014/02/25 职场文书
求职面试个人自我评价
2014/02/28 职场文书
初一学生期末评语
2014/04/24 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
企业团队精神心得体会
2016/01/19 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
Python中json.dumps()函数的使用解析
2021/05/17 Python
Python实现生成bmp图像的方法
2021/06/13 Python