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 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Js on及addEventListener原理用法区别解析
Jul 11 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获取网站域名和地址的代码
2008/08/17 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
常见的python正则用法实例讲解
2016/06/21 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
Delphi CS笔试题
2014/01/04 面试题
理工科学生的自我评价
2013/12/15 职场文书
职位说明书范文
2014/05/07 职场文书
个人年终总结开头
2015/03/06 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python