js 倒计时

最新推荐文章于 2025-05-29 14:47:07 发布

qq_37137999

最新推荐文章于 2025-05-29 14:47:07 发布

阅读量413

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_37137999/article/details/80567257

JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现倒计时功能。通过获取结束时间和当前时间的差值，转换为秒并计算天、时、分、秒，然后利用setInterval定时更新显示。代码示例展示了具体的实现步骤和HTML展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

倒计时思想：用结束时间减去开始时间（当前时间）所得到的毫秒进行转换为秒，再依次转换取得对应的天时分秒，连接字符串innerHTML到对象中，封装函数，开启定时，每隔一秒执行函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<script type="text/javascript">
window.onload = function(){
var demo = document.getElementById("demo");
var end = new Date("2019/06/06 15:30:00"); //结束时间
//console.log(end);

setInterval(start,1000); // 开启定时器，每隔一秒执行函数start

function start(){
var now = new Date(); //当前时间
//console.log(now);
var sy = parseInt((end.getTime() - now.getTime()) / 1000); // 剩余的秒数
//console.log(sy);

//将剩余的秒数一次转换为相应的天时分秒，记得取整

var d = parseInt(sy/3600/24);
var h = parseInt(sy/3600%24);
var m = parseInt(sy/60%60);
var s = parseInt(sy%60);

//当 d h m s 小于10 时，在前面加个0
d<10 ? d="0"+d : d;
h<10 ? h="0"+h : h;
m<10 ? m="0"+m : m;
s<10 ? s="0"+s : s;

demo.innerHTML = d+"天 "+h+"时 "+m+"分 "+s+"秒 ";
}
}
</script>
</head>
<body>
<div id="demo"></div>
</body>

</html>

运行结果：