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 相关文章推荐
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
javascript中expression的用法整理
May 13 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
详解angular中的作用域及继承
May 31 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 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中的string类型使用说明
2010/07/27 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python打包可执行文件的方法详解
2016/09/19 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
活动总结模板
2014/05/09 职场文书
离婚财产分割协议书
2015/08/11 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书