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提交多个表单的小例子
Jun 30 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
vue实现计步器功能
Nov 01 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
再探JavaScript作用域
2014/09/24 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python matplotlib可视化实例解析
2020/06/01 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
Java程序员面试题
2016/09/27 面试题
技术总监个人的自我评价范文
2013/12/18 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
动物科学专业求职信
2014/07/27 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
大学生自荐书范文
2015/03/05 职场文书
小学见习报告
2015/06/23 职场文书
致运动员加油稿
2015/07/21 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP