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笔记一 js以及json基础使用说明
May 22 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
bootstrap css样式之表单
Jan 19 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
AngularJS表单验证功能
Oct 19 Javascript
Vue分页效果与购物车功能
Dec 13 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 异常处理实现代码
2009/03/10 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JavaScript中Function详解
2015/02/27 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
小学生演讲稿
2014/01/12 职场文书
公司建议书怎么写
2014/05/15 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
老龄工作先进事迹
2014/08/15 职场文书
黄山导游词
2015/01/31 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python