倒计时html页面模板
HTML部分:
<!DOCTYPEhtml>
<html>
html span 居中 <head>
<metacharset="UTF-8">
<title>限时秒杀</title>
<scripttype="text/javascript"src="JavaScript/miaosha.js"></script>
</head>
<bodyonload="fresh()">
<divclass="img-box">
<spanid="hour"></span>:
<spanid="munite"></span>:
<spanid="second"></span>
<!--
作者:offline
时间:2021-07-08
描述:设置限时秒杀块
-->
<divid="bot-box">
</div>
</div>
</body>
</html>
设置span标签,放到div盒子里面,这里你可以写自己的css把这个倒计时器写成自己喜欢的样子,也可以通过写css来把这个倒计时器改成限时秒杀特效。
JavaScript代码(重要):
functionfresh(){
varendtime=newDate("2021/07/08,14:20:10");
varnowtime=newDate();
varleftsecond=parseInt((Time()-Time())/1000);
h=parseInt(leftsecond/3600);
m=parseInt((leftsecond/60)%60);
s=parseInt(leftsecond%60);
if(h<10){
h="0"+h;
}
if(m<10&&m>=0){
m="0"+m;
}elseif(m<0){
m="00";
}
if(s<10&&s>=0){
s="0"+s;
}elseif(s<0){
s="00";
}
ElementById('hour').innerHTML=h;
ElementById('munite').innerHTML=m;
ElementById('second').innerHTML=s;
if(leftsecond<=0){
ElementById('bot-box').style.display='block';
ElementById('bot-box').style.background='url(images/gjipe-dhermi.jpg)no-repeat';
ElementById('bot-box').innerHTML='秒杀结束';
clearInterval(sh);
}
}
varsh=setInterval(fresh,1000);
varendtime=newDate("2021/07/08,14:20:10");时间改成本地时间。你可以比如今天时间2021/07/08,12:26:20,然后写成2021/07/08,14:20:10,最后面的10是秒的意思,然后页面显示01:53:50倒计时。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论