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 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
JS图片懒加载的优点及实现原理
Jan 10 Javascript
简单了解JavaScript arguement原理及作用
May 28 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 curl 并发最佳实践代码分享
2012/09/05 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
php基础教程
2015/08/26 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
12步教你理解Python装饰器
2016/02/25 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
vue实现倒计时功能
2021/03/24 Vue.js
后勤采购员岗位职责
2013/12/19 职场文书
讲座新闻稿
2015/07/18 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python