JS写京东秒杀活动

最新推荐文章于 2023-11-30 21:13:19 发布

小神龙学前端

最新推荐文章于 2023-11-30 21:13:19 发布

阅读量574

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_74095707/article/details/130529946

版权

该代码示例展示了一个用于京东秒杀活动的倒计时页面，使用CSS定义样式，包括背景图片、文字颜色和布局。JavaScript部分则实现了秒杀时间的动态更新和清零处理，每秒递减，当时间归零时会自动清除定时器。

摘要由CSDN通过智能技术生成

 <style>
        /* 背景图片 */
        .bgm{
            border: 1px solid red;
            background-image: url("京东背景.png");
            height: 260px;
            width: 190px;
            background-color: red;
        }
        /* 京东秒杀 */
        .font_top{
            color: white;
            /*调试文字位置*/
            margin-top: 40px;
            text-align:center;
            
        }
        /* 距离时间点结束 */
        #font_foot{
            /* 调试文字位置 */
            color: white;
            margin-top: 90px;
            margin-left: 20px;
        }
        /* 给倒计时的那一部分搞一个盒子 */
        .box{
            /* 居中将盒子 */
            margin: auto;
            height:80px;
            width: 100px;
        }
        /* 设置时分秒的三个小盒子 */
        span{
            font-size: 20px;
            width: 50px;
            height: 50px;
            text-align: center;
            background-color: black;
            color: aliceblue;
            line-height: 50px;
        }
    </style>
    </head>
    <body>
        <div class="bgm">
            <h1 class="font_top">京东秒杀</h1>
            <div id="font_foot"><strong>10:00</strong>点场&nbsp距结束</div>
            <div class="box">
                <!-- 注意这里的数据是字符串,后续需要进行修改 -->
                <span id="hour">05</span>:<span id="minute">35</span>:<span
                    id="second">25</span>
            </div>
        </div>
        <script>
        // 获取元素
        let hourSpan=document.getElementById('hour');
        let minuteSpan=document.getElementById('minute');
        let secondSpan=document.getElementById('second');
        //设置一个定时器
        let res =setInterval(()=>{
        //获取时分秒 并进行修改
        let h = parseInt(hourSpan.innerHTML);
        let m = parseInt(minuteSpan.innerHTML);
        let s = parseInt(secondSpan.innerHTML);
        //每获取一次 s 就减减
        s--;
        //判断如果秒小于零 分钟减一
        if(s<0){
            s=59;
            m--;
        };
        //判断如果分钟小于零 小时减一
        if(m<0){
            m=59;
            h--;
        }
        //补零操作
        h=h<10?'0'+h:h;
        m=m<10?'0'+m:m;
        s=s<10?'0'+s:s;
        //刷新界面  就是将其修改为补零后的操作
        hourSpan.innerHTML=h;
        minuteSpan.innerHTML=m;
        secondSpan.innerHTML=s;
        //如果都变成零了就清除定时器
        if(s==0&&m==0&&s==0){
            clearInterval(res);
        }
        },1000);
        </script>
    </body>