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

优秀源码 无标签
0 900
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 迅雷推广激励平台:官方高收益网盘拉新赚钱项目 550
    02 kupid.ai和herahaven.com应该选哪个? 544
    03 a.icu b.icu c.icu d.icu 同时掉 514
    04 今天把所有的google广告去掉了 511
    05 aigc.cx又多了一个域名 503
    06 秀秀新米(已出) 501
    07 迅雷 12 精简绿色版(12.1.6.2780) 489
    08 Windows 11 LTSC 优化版 - placeholder(2025.02.27) 463
    09 deepseek给我的域名的建议 439
    10 音频文件转换软件 XRecode 3(1.164) 419
    推荐主机