HTML+js做个倒计时寒假余额倒计时

优秀源码无标签

 0  457

WIZ 自成一派 2024-01-31 08:20:04

Lv：36级

<html>
<head>
<title>Date Demo</title>
</head>
<body>
<script type="text/javascript" language="javascript">
// 设置倒计时的结束时间，这里设置为2024年2月26日8时0分0秒
var endTime = new Date("02/26/2024 08:00").getTime();
// 定时器函数，每隔1秒调用一次updateCountdown函数
var countdown = setInterval(function() {
// 获取当前时间
var now = new Date().getTime();
// 计算距离结束时间的时间差
var distance = endTime - now;
// 计算剩余天、小时、分钟、秒数
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 在页面上渲染剩余时间
document.getElementById("countdown").innerHTML = "距离寒假结束：" + days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒 ";
// 如果倒计时已经结束，则清除定时器
if (distance< 0) {
clearInterval(countdown);
document.getElementById("countdown").innerHTML = "寒假已结束！";
}
}, 1000);
        </script>
<div id="countdown"></div>
</body>
</html>

在上面的代码中，我们首先定义了一个endTime变量来指定倒计时的结束时间，然后我们使用setInterval函数来定义一个定时器，每隔1秒钟就会调用一次updateCountdown函数来更新页面上的倒计时时间。在updateCountdown函数中，我们先获取当前时间，然后计算剩余时间，最后将剩余时间以天、小时、分钟和秒数的形式呈现在页面上。最后，如果剩余时间小于0，则清除定时器。

使用HTML和JavaScript实现倒计时是一种非常简单的方法，您可以根据自己的需求将上面的代码进行修改来满足不同的需求。

楼主签名：DNSWIZ 站长故事

回帖

回复列表

更多回复