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实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
探讨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 DOS攻击实现代码(附如何防范)
2012/05/29 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
Javascript注入技巧
2007/06/22 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python识别验证码图片实例详解
2020/02/17 Python
python中的列表和元组区别分析
2020/12/30 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
业务员岗位职责范本
2013/12/15 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
《猫》教学反思
2014/02/26 职场文书
2016春季运动会前导词
2015/11/25 职场文书
会计专业自荐信范文
2019/05/22 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python