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 相关文章推荐
基于JQuery实现的Select级联
Jan 27 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
vue实现前端列表多条件筛选
Oct 26 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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数组键名技巧小结
2015/02/17 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python实现逻辑回归的示例
2020/10/09 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
团队精神演讲稿
2013/12/31 职场文书
公司授权委托书
2014/10/17 职场文书
首都博物馆观后感
2015/06/05 职场文书
生日祝酒词大全
2015/08/10 职场文书
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers