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

优秀源码 无标签
0 902
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 kupid.ai和herahaven.com应该选哪个? 552
    02 a.icu b.icu c.icu d.icu 同时掉 526
    03 aigc.cx又多了一个域名 518
    04 今天把所有的google广告去掉了 517
    05 秀秀新米(已出) 510
    06 迅雷 12 精简绿色版(12.1.6.2780) 497
    07 Windows 11 LTSC 优化版 - placeholder(2025.02.27) 473
    08 deepseek给我的域名的建议 450
    09 音频文件转换软件 XRecode 3(1.164) 429
    10 虚拟机软件 | VMware Workstation 精简版(17.6.3) 415
    推荐主机