js 倒计时，在html中显示，距离刷新还有几秒

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

廖圣平

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

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript jquery

本文链接：https://blog.csdn.net/qq_22823581/article/details/73168022

javascript 同时被 2 个专栏收录

49 篇文章

订阅专栏

jquery

10 篇文章

订阅专栏

本文介绍了一个简单的网页定时刷新案例，使用HTML和JavaScript实现。页面每隔10秒会自动刷新，并显示倒计时效果。此外还展示了如何获取当前时间并显示在页面上。

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

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>

<div style="text-align: center;margin-top: 20%">
    <div>距离刷新还有<span id="mes"style="color: red">10</span></div>
   <span id="time"></span>--刷新成功
</div>

</body>
<script src="__PUBLIC__/Admin/js/jquery.min.js"></script>
<script>
    function myrefresh() {
        window.location.reload();
    }
    var time;

    time = getNowFormatDate();

    $("#time").html(time);
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
        return currentdate;
    }

    setTimeout('myrefresh()', 10000); //指定1秒刷新一次

    //还有几秒；

    var i = 9;
    var intervalid;
    intervalid = setInterval("fun()", 1000);
    function fun() {
        if (i == 0) {
            clearInterval(intervalid);
        }
        document.getElementById("mes").innerHTML = i;
        i--;
    }

</script>
</html>