倒计时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小时内删除。