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

优秀源码 无标签
0 937
WIZ
WIZ 自成一派 2024-01-31 08:20:04
Lv:45级
<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 站长故事
回帖
回复列表

    请遵守各国法律法规 严禁违规内容

    • QQ群:1140251126
    • Email:m@max.ooo
    • 本站可以自由发布外链
    • 本站域名皆为闲置域名,均可出售
    Hot posts
    01 我雇了个刨地的人,干活太慢,有没有来帮忙的 292
    02 只剩3个域名了 261
    03 影迷有福了,淘票票8周年0.2元购20元券! 238
    04 各位大佬 有啥赚点零花钱的项目 184
    05 免费主机快二年了,用户超过2000+ 178
    06 8000 个 4K 蓝光原盘 REMUX 磁力链接 171
    07 Dynadot四月域名优惠来了~.LOL限时$1 171
    08 源支付全套开源V7开源免授权版源码V1.8.9+源支付开源版 169
    09 mf.gs魔方已出 165
    10 看到一个好域名th.ink 149
    推荐主机