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 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
JS封装cavans多种滤镜组件
Feb 15 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
理解python中生成器用法
2017/12/20 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
python中实现栈的三种方法
2020/12/19 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
21岁生日感言
2014/02/27 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
大学生交通专业求职信
2014/09/01 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
步步惊心观后感
2015/06/12 职场文书
人事任命书范本
2015/09/21 职场文书
Python Numpy库的超详细教程
2022/04/06 Python