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的gzip静态压缩方法
Jan 05 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
小程序实现分类页
Jul 12 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
解析php入库和出库
2013/06/25 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
PHP守护进程实例
2015/03/06 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
layui table 参数设置方法
2018/08/14 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Python实现抢购IPhone手机
2018/02/07 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
什么是反射
2012/03/17 面试题
大学军训感言1000字
2014/02/25 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
简历自我评价优缺点
2015/03/11 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书