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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
vue data引入本地图片的两种方式小结
Nov 13 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中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
JS实现点击掉落特效
2021/01/29 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
Django中url的反向查询的方法
2018/03/14 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
Python中拆分字符串的操作方法
2019/07/23 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
2014年幼儿园后勤工作总结
2014/11/10 职场文书
留学推荐信中文范文
2015/03/26 职场文书
营运督导岗位职责
2015/04/10 职场文书
警示教育观后感
2015/06/17 职场文书
教师继续教育反思周记
2015/06/25 职场文书
什么是css原子化,有什么用?
2022/04/24 HTML / CSS