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

优秀源码 无标签
0 206
GS
GS 自成一派 2024-01-31 08:20:04
Lv:26级
<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实现倒计时是一种非常简单的方法,您可以根据自己的需求将上面的代码进行修改来满足不同的需求。

楼主签名:Admin.Gs 站长故事
回帖
回复列表

    遵守各国法律法规 严谨违规内容

    • QQ群:1140251126
    • Email:admin@admin.gs
    • 本站可以自由发布正规网站外链
    • 本站域名 admin.gs 其它皆为闲置域名
    本站热帖
    01 支付监控3合1工具2029版,支持自定义广告 534
    02 股票要做短线,机遇都是短线 479
    03 彩虹网站监控可以网址url监控,定时任务源码 420
    04 携手特工、雷人组建了nice臻选 408
    05 码支付漏洞测试开源版,来测试有没有漏洞 386
    06 最新域名出售交易平台源码修复版 379
    07 源支付V7版,以前150购买,需要的下载研究,拿走回复 292
    08 最新版弹幕播放器源码,带后台 287
    09 新米:Mujiji.com 283
    10 今天把racknerd的服务器DD成windows了 274
    推荐主机