HTML+JavaScript实现网页秒杀倒计时效果

最新推荐文章于 2023-07-28 09:37:53 发布

b^b烧麦

最新推荐文章于 2023-07-28 09:37:53 发布

阅读量1.4k

点赞数 2

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/m0_53841203/article/details/128290056

版权

HTML 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

HTML+JavaScript实现网页秒杀倒计时效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页秒杀倒计</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul,li{
                list-style: none;
            }
            .big{
                background-color: bisque;
            }
        #banner{
            width: 702px;
            height: 378px;
            
            margin: 0px auto;
            background-image: url("flash_sale.png");

        
         }

        #day{
            height: 60px;
            width: 60px;
            background-color: white;
            text-align: center;
            color: red;
            border: 1px solid black;
        }
        #hour{
            height: 60px;
            width: 60px;
            background-color: white;
            text-align: center;
            color: red;
            border: 1px solid black;
        }
        #minute{
            height: 60px;
            width: 60px;
            background-color:white;
            text-align: center;
            color: red;
            border: 1px solid black;
        }
        #second{
            height: 60px;
            width: 60px;
            background-color: white;
            text-align: center;
            color: red;
            border: 1px solid black;
        }
        ul{
            float: left;
            margin-top: 260px;
            margin-left: 300px;
          
        }
        ul>li{
            float: left;
            margin-left: 15px;
            line-height: 60px;
        }
        ul>li:first-child{
            margin-left: 10px;
            
        }
      
        </style>
    </head>
    <body>
        <div class="big">
        <div id="banner">
            <ul>
                <li><p id="day"></p></li>
                <li><p id="hour"></p></li>
                <li> <p id="minute"></p></li>
                <li> <p id="second"></p></li>
                <li><font id="dome" color="white" size="+2">秒杀已经截止!</font></li>
            </ul>
            
        </div>
        </div>
        <script >
(function show() {      
    //1.设置目的时间
    var Time=window.prompt('请输入秒杀结束时间,如2022-09-01 20:00:00');
    var oYear = Time[0]*10*10*10+Time[1]*10*10+Time[2]*10 + Time[3]*1;
    var oMonth = Time[5]*10+Time[6]*1-1;
    var oDay = Time[8]*10+Time[9]*1;
    var oHour = Time[11]*10+Time[12]*1;
    var oMinute = Time[14]*10+Time[15]*1;
    var oSecond =Time[17]*10+Time[18]*1;
    if(isNaN(oSecond)){
        oSecond=0;
    }
  //console.log(oSecond)
    var funtureDate = new Date(oYear, oMonth, oDay, oHour, oMinute, oSecond);
    var target=document.querySelector('font'); 

    //2.设置定时器
    var time=setInterval(function () {
        //3.获取现在的时间
        var presentDate = new Date();
        //4.获取时间戳
        var funtureTime = funtureDate.getTime();
        var presenTime = presentDate.getTime();
        //5.获取剩余的时间戳
        var allTime = funtureTime - presenTime;          
        //6.把毫秒转换为秒
        var allSecond = parseInt(allTime / 1000);
        //7.获取剩余多少天
        var day = size(parseInt(allSecond / 3600 / 24));
        //8.获取剩余多少小时
        var hour = size(parseInt(allSecond / 3600 % 24));
        //9.获取剩余多少分钟
        var minute = size(parseInt(allSecond / 60 % 60));
        //10.获取剩余多少秒
        var second = size(parseInt(allSecond % 60));
        //11.判断
        if((day<=0&&hour<=0&&minute<=0&&second<=0)){
    clearTimeout(time);
    target.setAttribute('color','blue');
    day=0;
    hour=0;
    minute=0;
    second=0;
        }
        // 12.写入
        document.getElementById('day').innerHTML = day;
        document.getElementById('hour').innerHTML = hour;
        document.getElementById('minute').innerHTML = minute;
        document.getElementById('second').innerHTML = second;
       
    }, 1000);
    //如果数>=10,则在前面补0
    function size(num) {
        return num < 10 & num >= 0 ? '0' + num : num;
    }  


}
)()

</script>
    </body>
</html>