html网页里面怎么实现十五分钟倒计时,有代码吗?期待同学们的回答
用JS写的function来返回倒计时,之后把这个倒计时结果设置在某一个你想要表达的element中
你可以参照一下:https://blog.csdn.net/qq_41606248/article/details/100096233
<script type="text/javascript">
window.οnlοad=function(){ //⼀进该页⾯就加载以下⽅法
tick(); //显⽰右下⾓⽇期的⽅法
setInterval('countDown()',1000); //⼀般秒设置为参数为1000
}
var sec = 900; //设置倒计时时间为900秒
function countDown() { //倒计时的⽅法
if(sec > 0) {
num.innerHTML = sec--;
} else {
location = "menu.html"; //倒计时为0进⼊的页⾯
}
}
</script>
在body中插⼊以下两行:
<font color ="red"><h2 align="right">倒计时</h2>
<font color ="red"><h3 align="right"id="num" size="7" face="impact">900</h3></font>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 60px;
height: 60px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div>
<span class="day"></span>
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
<script type="text/javascript">
var sday = document.getElementsByClassName("day")[0];
var shour = document.getElementsByClassName("hour")[0];
var sminute = document.getElementsByClassName("minute")[0];
var ssecond = document.getElementsByClassName("second")[0];
// 未来时间
var futuretm = new Date("2022-11-23 22:00:00");
var newtm = new Date();
var t = futuretm.getTime()-newtm.getTime();
var day = Math.floor(t/1000/3600/24);
var hour = Math.floor(t/1000/3600 - day*24);
var minute = Math.floor(t/1000/60 -day*24*60 -hour*60);
var second = Math.floor(t/1000 -day*24*60*60 -hour*60*60 -minute*60);
sday.innerText = day+"天";
shour.innerText = hour+"时";
sminute.innerText = minute +"分";
ssecond.innerText = second + "秒";
setInterval(function(){
var newtm = new Date();
var t = futuretm.getTime()-newtm.getTime();
var day = Math.floor(t/1000/3600/24);
var hour = Math.floor(t/1000/3600 - day*24);
var minute = Math.floor(t/1000/60 -day*24*60 -hour*60);
var second = Math.floor(t/1000 -day*24*60*60 -hour*60*60 -minute*60);
sday.innerText = day+"天";
shour.innerText = hour+"时";
sminute.innerText = minute +"分";
ssecond.innerText = second + "秒";
},1000);
</script>
</body>
</html>