详解JS实现简单的时分秒倒计时代码
更新时间：2019年04月25日 10:28:25 作者：Asia1100
这篇文章主要介绍了JS时分秒倒计时的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文实例为大家分享了JS时分秒倒计时的实现的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js简单时分秒倒计时</title>
<script type="text/javascript">
function countTime() {
//获取当前时间
var date = new Date();
var now = date.getTime();
//设置截止时间
var endDate = new Date("2016-10-22 23:23:23");
var end = endDate.getTime();
//时间差
var leftTime = end-now;
//定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (leftTime>=0) {
d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime/1000/60/60%24);
m = Math.floor(leftTime/1000/60%60);
s = Math.floor(leftTime/1000%60);
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d+"天";
document.getElementById("_h").innerHTML = h+"时";
document.getElementById("_m").innerHTML = m+"分";
document.getElementById("_s").innerHTML = s+"秒";
//递归每秒调用countTime方法，显示动态时间效果
setTimeout(countTime,1000);
}
</script>
</head >
<body onload = "countTime()">
<div>
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
</div>
</body>
</html>
代码总结：
Math.floor：返回小于等于参数的最大整数
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式
以上所述是小编给大家介绍的JS时分秒倒计时的实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在javascript中有两种注释方式,单行注释与多行注释。2011-09-09
xmlplus组件设计系列之网格（DataGrid）(10）
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之xmlplus网格，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了java遇到微信小程序 "支付验证签名失败" 问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了JavaScript日期时间与时间戳的转换函数分享,本文给出两个函数实现日期时间和时间戳间的转换,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS获取鼠标坐标位置的方法,结合实例形式分析了JavaScript常见的获取鼠标页面、屏幕等坐标位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JS如何替换文本域内的回车,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JavaScript函数重载操作,结合一次面试经历分析了JavaScript函数重载相关原理、用法及操作注意事项,需要的朋友可以参考下2020-05-05
xml转json的js代码，需要的朋友可以参考下2012-08-08
这篇文章主要介绍了微信小程序实现活动报名登记,本篇将介绍使用微信小程序实现发起一个活动报名的设计，以此为基础，我们可以掌握微信小程序表单的基本用法，进而在诸如疫情信息登记、出入报备等场景中使用小程序进行开发，满足相关的需求，需要的朋友可以参考下2022-09-09
JS中DOM元素的attribute与property属性示例详解
这篇文章主要给大家介绍了关于JS中DOM元素的attribute与property属性的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧2018-09-09
最新评论