JS实现倒计时(天数、时、分、秒)


Posted in Javascript onNovember 16, 2016

本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下

注释:
parseInt() 函数可解析一个字符串,并返回一个整数。
语法:
parseInt(string, radix)

JS实现倒计时(天数、时、分、秒)

例:

parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定:返回 10 或 8

实现倒计时代码

html代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" > 
<title>JS实现倒计时(天数,时,分,秒)</title> 
 
</head> 
<body onload="leftTimer()"> 
 
<h2>剩余时间:</h2> 
<div id="timer"></div> 
</body> 
</html>

javascript代码:

<script language="javascript" type="text/javascript"> 
function leftTimer(year,month,day,hour,minute,second){ 
 var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数 
 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 
 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 
 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 
 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 
 days = checkTime(days); 
 hours = checkTime(hours); 
 minutes = checkTime(minutes); 
 seconds = checkTime(seconds); 
 setInterval("leftTimer(2016,11,11,11,11,11)",1000); 
 document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒"; 
} 
function checkTime(i){ //将0-9的数字前面加上0,例1变为01 
 if(i<10) 
 { 
 i = "0" + i; 
 } 
 return i; 
} 
 
</script>

实现效果:

JS实现倒计时(天数、时、分、秒)

小编在作者分享的文章基础上再为大家整理一段完整的代码,拿去用吧!

<html>
<body>
<input type="text" value="" id="date2">
<input type="button" onclick="go(document.getElementById('date2').value);" value="开始">
<div id="timer"></div>
<script type="text/javascript">
 // 倒计时
 var _ordertimer = null;
 var data=new Date();
 document.getElementById("date2").value=data.getFullYear()+'-'+(data.getMonth()+1)+'-'+data.getDate()+' '+data.getHours()+':'+data.getMinutes()+':'+data.getSeconds();//当前时间
 function leftTimer(enddate) {
 var leftTime = (new Date(enddate)) - new Date(); //计算剩余的毫秒数
 var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
 days = checkTime(days);
 hours = checkTime(hours);
 minutes = checkTime(minutes);
 seconds = checkTime(seconds);
 if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0) document.getElementById("timer").innerHTML = days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
 if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
 window.clearInterval(_ordertimer);
 _ordertimer = null;
 }
 }
 function checkTime(i) { //将0-9的数字前面加上0,例1变为01
 if (i < 10) {
 i = "0" + i;
 }
 return i;
 }
 function go(v){
 var date1=new Date(),data2=new Date(v);
 if(data2<date1)return;//设置的时间小于现在时间退出
 _ordertimer = setInterval(function(){leftTimer(data2)}, 1000);
 }
 </script>
 </body>
 </html>

效果图:

JS实现倒计时(天数、时、分、秒)

相关阅读:

更多关于倒计时的文章请查看专题: 《倒计时功能》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
javascript中万恶的function实例分析
May 25 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
实例教学如何写vue插件
Nov 30 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 #Javascript
jQuery 插件封装的方法
Nov 16 #Javascript
Node.js 数据加密传输浅析
Nov 16 #Javascript
JS中substring与substr的用法
Nov 16 #Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 #Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 #Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 #Javascript
You might like
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
JS location几个方法小姐
2008/07/09 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
常用的10个Python实用小技巧
2020/08/10 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
高中班长自我鉴定
2013/12/20 职场文书
元旦寄语大全
2014/04/10 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
无故旷工检讨书
2015/08/15 职场文书
Javascript webpack动态import
2022/04/19 Javascript
Python软件包安装的三种常见方法
2022/07/07 Python