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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
js尾调用优化的实现
May 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
MySQL授权问题总结
2007/05/06 PHP
PHP print类函数使用总结
2010/06/25 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python版学生管理系统
2018/01/10 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
英语国培研修感言
2014/02/13 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
交通安全学习心得体会
2016/01/18 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript