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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
Vue如何实现监听组件原生事件
Jul 03 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
js控制input输入字符解析
2013/12/27 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python面向对象之继承代码详解
2018/01/29 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
python 追踪except信息方式
2020/04/25 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
实习教师自我鉴定
2013/12/09 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
党支部意见范文
2015/06/02 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
mysql知识点整理
2021/04/05 MySQL
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
简单介绍Python的第三方库yaml
2021/06/18 Python