JS实现简单秒杀页面

鹿路露璐

于 2022-10-31 19:58:44 发布

阅读量186

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/csdnid_0001/article/details/127622250

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:first-child {
            width: 969px;
            height: 349px;
            margin: auto;
            background-image: url('./image/1.PNG');
        }

        li {
            list-style: none;
            display: inline-block;
            /* float: right; */
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
        }

        div:nth-of-type(2) {
            width: 30%;
            margin: auto;
        }

        div:nth-of-type(2) span {
            float: left;
            line-height: 50px;
            color: red;
            /* border: 1px solid red; */
        }

        div:nth-of-type(2) li {
            margin: 0px 5px;
            text-align: center;
            line-height: 50px;
            color: red;
        }
    </style>
</head>

<body onload="showinfo()">
    <div></div>
    <div>
        <span>距离本场秒杀结束还剩：</span>
        <ul>
            <li id="one"></li>
            <li id="two"></li>
            <li id="three"></li>
            <li id="four"></li>
        </ul>
    </div>
    <script>
        let end = new Date('2022-11-11')

        function showinfo() {
            //1.创建日期对象
            let start = new Date()

            //2.计算得到两个日期对象之间的毫秒数之差,转换成秒钟
            let times = (end - start) / 1000

            if (times > 0) {

                //3.计算得到天、时、分、秒
                let d = parseInt(times / 60 / 60 / 24)  //转换成天数
                d = d < 10 ? ('0' + d) : d //如果天数是个位数，则在前面补0

                let h = parseInt(times / 60 / 60 % 24)
                h = h < 10 ? ('0' + h) : h

                let m = parseInt(times / 60 % 60)
                m = m < 10 ? ('0' + m) : m

                let s = parseInt(times % 60)
                s = s < 10 ? ('0' + s) : s

                let info1 = `${d}天`;
                let num1 = document.querySelector('#one');
                num1.innerHTML = info1;

                let info2 = `${h}时`;
                let num2 = document.querySelector('#two');
                num2.innerHTML = info2;

                let info3 = `${m}分`;
                let num3 = document.querySelector('#three');
                num3.innerHTML = info3;

                let info4 = `${s}秒`;
                let num4 = document.querySelector('#four');
                num4.innerHTML = info4;

            } else {
                clearInterval(timer);
                d = h = m = s = '00';
            }

        }

        var timer = setInterval(showinfo, 1000);

    </script>
</body>

</html>