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实现Sleep函数的代码
Mar 04 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 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 Smarty 字符比较代码
2011/02/27 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
详解JS预解析原理
2020/06/16 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
详解python字节码
2018/02/07 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
简单了解python中的与或非运算
2019/09/18 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
团员学习总结的自我评价范文
2013/10/14 职场文书
职工代表大会主持词
2014/04/01 职场文书
老师对学生的评语
2014/04/18 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
推广普通话演讲稿
2014/05/23 职场文书
白莲教口号
2014/06/18 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
北京青年观后感
2015/06/15 职场文书