代码如下
<!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>