• 梦想还是要有的,万一实现了呢...
  • 区块链论坛整装待发...

JS倒计时刷新HTML页面并显示时间,javascript代码实例

JavaScript Vetrue 6个月前 (04-22) 186次浏览 0个评论 二维码链接

代码如下

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>JS 倒计时刷新 HTML 页面并显示时间</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> 
<!--加载 JQ 库-->
<script src="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>  

Vetrue , 版权所有丨如未注明 , 均为原创丨转载请注明原文链接
原文标题:JS 倒计时刷新 HTML 页面并显示时间,javascript 代码实例
原文链接:https://vetrue.com/article/230.html
喜欢 (1)
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址