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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
javascript数据类型示例分享
Jan 19 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
ant design vue中表格指定格式渲染方式
Oct 28 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中英混合字符串截取函数代码
2011/07/17 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php通过各种函数判断0和空
2020/07/04 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
js实现全选和全不选
2020/07/28 Javascript
python opencv之SURF算法示例
2018/02/24 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python中必要的名词解释
2019/11/20 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
消防先进事迹材料
2014/02/10 职场文书
法学求职信
2014/06/22 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Python道路车道线检测的实现
2021/06/27 Python
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
AJAX实现省市县三级联动效果
2021/10/16 Javascript
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
nginx之内存池的实现
2022/06/28 Servers
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS