JS精确到毫秒的倒计时

最新推荐文章于 2025-05-29 14:47:07 发布

转载最新推荐文章于 2025-05-29 14:47:07 发布 · 1.2w 阅读

文章标签：

#date #function #脚本 #html #div

JavaScript 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现精确到毫秒的倒计时功能的方法，包括HTML页面布局和核心的JavaScript脚本逻辑。通过设置截止日期和实时计算剩余时间，动态更新显示剩余的天数、小时、分钟和秒。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS精确到毫秒的倒计时

1、页面HTML代码

<div id="CountMsg">
    今天距离
    <strong id="EndTimeMsg"></strong>
    还有
    <strong id="RemainD">0</strong>天
    <strong id="RemainH">00</strong>时
    <strong id="RemainM">00</strong>分
    <strong id="RemainS">00</strong>秒
</div>

2、JS脚本

var overDate = 1000 * 60 * 60 * 24 * 3; //截止时间:为当前计算机时间+3天
var NowTime = new Date();
//var EndTime= new Date(2012,06,24,0,0);  //截止时间：为固定时间
var EndTime = new Date(NowTime.getTime() + overDate);
var EndTimeMsg = EndTime.getFullYear() + "年";
EndTimeMsg = EndTimeMsg + (EndTime.getMonth() + 1) + "月";
EndTimeMsg = EndTimeMsg + (EndTime.getDate()) + "日";
EndTimeMsg = EndTimeMsg + (EndTime.getHours()) + "时";
EndTimeMsg = EndTimeMsg + (EndTime.getMinutes()) + "分";
EndTimeMsg = EndTimeMsg + (EndTime.getSeconds()) + "秒";

function GetRTime()
{
    NowTime = new Date();
    var nMS = EndTime.getTime() - NowTime.getTime();
    var nD = Math.floor(nMS / (1000 * 60 * 60 * 24));
    var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;
    var nM = Math.floor(nMS / (1000 * 60)) % 60;
    var nS = Math.floor(nMS / 1000) % 60;
    var nMS = Math.floor(nMS / 100) % 10;
    if (nD >= 0)
    {
        document.getElementById("RemainD").innerHTML = nD;
        document.getElementById("RemainH").innerHTML = nH;
        document.getElementById("RemainM").innerHTML = nM;
        document.getElementById("RemainS").innerHTML = nS + "." + nMS;
    }
    else {
        document.getElementById("CountMsg").innerHTML = EndTimeMsg + "已过期！";
    }
    setTimeout("GetRTime()", 100);
}

window.onload = function() {
    document.getElementById("EndTimeMsg").innerHTML = EndTimeMsg;
    GetRTime();
}