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在页面中绘制表格核心代码
Sep 16 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
ES6中的Javascript解构的实现
Oct 30 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
destoon二次开发入门示例
2014/06/20 PHP
php浏览历史记录的方法
2015/03/10 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
node.js超时timeout详解
2014/11/26 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
python多线程操作实例
2014/11/21 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
详解python3中tkinter知识点
2018/06/21 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
django的model操作汇整详解
2019/07/26 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
学习python需要有编程基础吗
2020/06/02 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
中专生自荐信
2013/10/12 职场文书
学习决心书
2014/03/11 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
投资申请报告
2015/05/19 职场文书
单独二胎证明
2015/06/24 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
基于redis+lua进行限流的方法
2022/07/23 Redis