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 显示当前系统时间代码
Dec 28 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
JavaScript之解构赋值的理解
Jan 30 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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/09/20 PHP
php 文章采集正则代码
2009/12/28 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
js form action动态修改方法
2008/11/04 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
小学中秋节活动方案
2014/02/06 职场文书
群众路线党课主持词
2014/04/01 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
经理聘任证明
2015/03/02 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
天气温馨提示语
2015/07/14 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL