• 秒杀倒计时


    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                ul{
                    background: aqua;
                }
                li{
                    display: inline-block;
                }
            </style>
        </head>
        <body>
        </body>
            <ul>
                <li class="sk-h"></li><li class="sk-m"></li><li class="sk-s"></li></ul>
        <script src="js/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            //需要的地方调用
            achieveTime(3610);
            //1h=60m=360s
            //3600s/60=60m   60m/60=1h    那么最开始的时候显示的数据为  01 时 00 分 00 秒
            
            //秒杀倒计时
            function achieveTime(countdownTime){
                var timeDown;
                clearInterval(timeDown);
                var time = countdownTime;
                if(time>=0){
                    showTime(time);
                    timeDown = setInterval(function(){
                        --time ;
                        showTime(time);
                        if(time==0){
                            clearInterval(timeDown);
                        }
                    },1000);
                }else{
                    $(".sk-h").text('00');
                    $(".sk-m").text('00');
                    $(".sk-s").text('00');
                }
            }
            
            function showTime(t){
                var h = Math.floor(t/60/60%24);
                var m = Math.floor(t/60%60);
                var s = Math.floor(t%60);
                if(h<10){
                    h = "0"+h
                }
                if(m<10){
                    m = "0"+m
                }
                if(s<10){
                    s = "0"+s
                }
                $(".sk-h").text(h);
                $(".sk-m").text(m);
                $(".sk-s").text(s);
            }
    
        </script>
    </html>
  • 相关阅读:
    第九周总结
    第八周总结
    第六周
    中国历史上成功的两个人
    第五周总结
    第四周总结
    关于IT行业的抄袭事件
    第三周总结
    第二周总结
    第九周
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6709440.html
Copyright © 2020-2023  润新知