Web前端开发小实训（三）商品秒杀小练习

学生能够在本次实训中完成商品秒杀页面的基本逻辑

任务要求

能够实现某一个商品的秒杀，在倒计时结束后不再进行秒杀。

操作步骤

1、打开预设好的页面

<html>

<head>
    <meta charset="utf-8">
    <title>秒杀</title>
    <link rel="stylesheet" href="css/ms.css">

</head>

<body>
    <div class="container">
        <div class="item ms">
            <h2 class="title">
                商品秒杀
            </h2>

            <h3 class="subtitle">
                FLASH DEALS
            </h3>

            <i class="icon">
            </i>

            <p class="desc">
                本场距离结束时间
            </p>
            <div class="clock">
                <span id="hours" class="hour">00</span>
                <span class="point">:</span>
                <span id="minutes" class="minute">00</span>
                <span class="point">:</span>
                <span id="seconds" class="second">59</span>
            </div>
        </div>

        <div class="item">
            <a href="#" class="product-link">
                <img src="https://img20.360buyimg.com/seckillcms/s280x280_jfs/t28882/109/582315249/52026/e4ff99b9/5bf7cb37N98f8ac82.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    3M 节气门清洗剂【不伤镀层|多功能除油泥除积碳|8866升级】汽车金属件润滑节流阀去油污非化清剂PN18066
                </p>
                <div class="price">
                    <span class="price-new">
                        134.00
                    </span>
                    <span class="price-old">
                        208.00
                    </span>
                    <button class="button_allow">抢购 </button>

                </div>
            </a>
        </div>

        <div class="item">
            <a href="#" class="product-link">
                <img src="https:///img12.360buyimg.com/seckillcms/s280x280_jfs/t1/116581/22/13747/111761/5f2373f5E2f543b8f/8a64bb1f2303930b.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    华为nova7 SE 5G手机【12期免息可选/送碎屏险】 全网通 幻夜黑 8G+128G
                </p>
                <div class="price">
                    <span class="price-new">
                        1324.00
                    </span>
                    <span class="price-old">
                        4208.00
                    </span>
                    <button class="button_allow">抢购 </button>

                </div>
            </a>
        </div>
        <div class="item">
            <a href="#" class="product-link">
                <img src="https:///img12.360buyimg.com/seckillcms/s280x280_jfs/t1/144957/21/3917/192269/5f1fcf99E314ac8a7/75a2d6a7cabc3d72.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    雷公馆 毛呢大衣女秋冬新品毛呢外套羊毛呢宽松显瘦呢子大衣中长款单排扣品牌上衣 米白色 M
                </p>
                <div class="price">
                    <span class="price-new">
                        324.00
                    </span>
                    <span class="price-old">
                        908.00
                    </span>
                     <button class="button_allow">抢购 </button>
                </div>
            </a>
        </div>
    </div>
</body>
</html>

css

/*位置在css目录下，名字为 ms.css*/
*{
    margin: 0px;
    padding: 0px;
    font: 12px/1.5 Tahoma, Arial, Harrington, "微软雅黑" /*给标签一个初始大小 12像素 1.5倍行距 管理字体*/
}
a{
    text-decoration: none;/*去掉默认链接的下划线*/
    color: black;
}
a:hover{
    color: red;/*实现鼠标上去变色*/
}
.container{
    /*border: red solid 1px;*/
    overflow: hidden;	
}
.item{
    float: left;
    width: 190px;
    height: 260px;
    border: #877D7D solid 1px;			
}
.ms{/*秒杀模块拥有单独的背景色 且模块的字体是白色*/
    background-color: #D90D0D;
    color: white;
    text-align: center;/*表示里面所有的模块是居中的*/
}
.ms .title{/*秒杀模块的字体*/
    font-size: 30px;
    margin: 15px;/*距头顶*/
}
.ms .subtitle{
    font-size: 20px;
    color: rgba(255,255,255,0.5);/*含有透明色*/
    margin-bottom: 10px;/*和下一个模块保持距离*/
}
.ms .icon{/*那个闪电描述 这个盒子*/
    width: 30px;
    height:57px;/*此时没有显示 */
    display: block;/*i元素通过这个显示属性*/
    background-image: url(../images/3.jpg);/*此时只显示了一小部分 需要移动*/
    background-position: -130px -102px;
    margin:0 auto 15px;/*块状模块的居中*/ /*和下一个模块保持距离*/
    
}
.ms .desc{
    font-size: 16px;
    margin: 5px;
    
}
/*后代选择器*/
.ms .clock span.second,span.hour,span.minute{
    display: inline-block;/*并排显示 更是为了可以人为指定宽度*/
    width: 40px;
    height: 40px;
    background-color: black;
    font-size: 20px;
    line-height: 40px;/*让字体的显示在中间按*/	
}
.ms .clock span.point{
    display: inline-block;/*并排显示 更是为了可以人为指定宽度*/
    width: 10px;
    height: 40px;

    font-size: 20px;
    line-height: 40px;/*让字体的显示在中间按*/
}
.product-link{
    display: block;
    height: 100%;
    text-align: center;
    padding-top: 39px;
}
.product-desc{/*文字显示在一行并且没显示的用...代替*/
    white-space: nowrap;/*文字不换行*/
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;/*超出部分使用..代替*/
    margin: 0 auto 20px;	
    
}
.price{
    width: 160px;
    height: 20px;
    background-color: red;
    margin: 0 auto;
    padding:1px;
}
.price span{

    width: 78px;
    height: 20px;
    font-size: 14px;
    display: inline-block;
}
.price .price-new{
    line-height: 20px;
    color: antiquewhite;
    
}
.price .price-old{

    color: white;
    background-color: #766364;
    
}

.price .button_allow{
    width: 160px;
    height: 20px;
    font-size: 14px;
    margin-top: 5px;
    color: white;
    display: inline-block;
    background-color: red;

}

.price .button_forbid{
    width: 160px;
    height: 20px;
    font-size: 14px;
    margin-top: 5px;
    color: white;
    display: inline-block;
    background-color:  #766364;
}

2、设置秒杀结束时间

//单独设置一个结束时间，人为定义
let endTime = new Date("2024-5-5 10:00:00").getTime();

3、声明变量保存剩余的时间

// 2、声明变量保存剩余的时间
let hours, minutes, seconds = 0;

4、设置定时器，实现限时秒杀效果

 function ms() {
            alert("秒杀开始了!")
            //4、设置定时器
           let interval =  window.setInterval(function () {
              //实际业务
            }, 1000);
        }
        //调用该方法
        ms();

5、获取时间差（单位秒），并判断秒杀是否过期

 let now = new Date();//获取当前时间
  //获取设置的时间差 remaining 差距
 let remaining = endTime - now.getTime();
  //只要时间差大于0 就可以进行倒计时 
 if (remaining > 0) {
  //简易版：转化为还差多少秒
        let seconds = parseInt(remaining / 1000);//还差多少秒 转化为整数秒
        seconds = seconds < 10 ? "0"+seconds:seconds; //小于 0 则为0+秒数
        document.getElementById("seconds").innerText = seconds;
  } else {
        //结束了
         alert("秒杀结束了!");
         //复位
         document.getElementById("seconds").innerText = "00";
  }

6、取消定时器

 } else {
        //结束了
         alert("秒杀结束了!");
        //6、在停止后结束取消定时器
        window.clearInterval(interval);
}

7、设置演示当前效果（将倒计时时间设置为大于当前时间）

8、倒计时结束前可以点击抢购获取商品（补充：onclick事件）

<button class="button_allow" onclick="alert('恭喜你抢到了清洁剂!')">抢购 </button>
<button class="button_allow" onclick="alert('恭喜你抢到了nova7SE!')">抢购 </button>
<button class="button_allow" onclick="alert('恭喜你抢到了毛呢大衣!')">抢购 </button>

9、倒计时结束后修改按钮样式，并使其不再进行点击

//结束了
alert("秒杀结束了!");
document.getElementById("seconds").innerText = "00";

//6、在停止后结束取消定时器
window.clearInterval(interval);

//8、让所有按钮修改弹出样式
let buttonList = document.getElementsByTagName("button");
for(let index = 0 ; index < buttonList.length; index ++){   
      buttonList[index].setAttribute("disabled","true");//不再进行点击
      buttonList[index].removeAttribute("onclick");//移除点击事件
      buttonList[index].classList.replace("button_allow","button_forbid");

10、查看最终效果

完整代码：

<html>

<head>
    <meta charset="utf-8">
    <title>秒杀</title>
    <link rel="stylesheet" href="css/ms.css">

</head>

<body>
    <div class="container">
        <div class="item ms">
            <h2 class="title">
                商品秒杀
            </h2>

            <h3 class="subtitle">
                FLASH DEALS
            </h3>

            <i class="icon">
            </i>

            <p class="desc">
                本场距离结束时间
            </p>
            <div class="clock">
                <span id="hours" class="hour">00</span>
                <span class="point">:</span>
                <span id="minutes" class="minute">00</span>
                <span class="point">:</span>
                <span id="seconds" class="second">59</span>
            </div>
        </div>

        <div class="item">
            <a href="#" class="product-link">
                <img src="https://img20.360buyimg.com/seckillcms/s280x280_jfs/t28882/109/582315249/52026/e4ff99b9/5bf7cb37N98f8ac82.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    3M 节气门清洗剂【不伤镀层|多功能除油泥除积碳|8866升级】汽车金属件润滑节流阀去油污非化清剂PN18066
                </p>
                <div class="price">
                    <span class="price-new">
                        134.00
                    </span>
                    <span class="price-old">
                        208.00
                    </span>
                    <button class="button_allow" onclick="alert('恭喜你抢到了3M清洁剂!')">抢购 </button>

                </div>
            </a>
        </div>

        <div class="item">
            <a href="#" class="product-link">
                <img src="//img12.360buyimg.com/seckillcms/s280x280_jfs/t1/116581/22/13747/111761/5f2373f5E2f543b8f/8a64bb1f2303930b.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    华为nova7 SE 5G手机【12期免息可选/送碎屏险】 全网通 幻夜黑 8G+128G
                </p>
                <div class="price">
                    <span class="price-new">
                        1324.00
                    </span>
                    <span class="price-old">
                        4208.00
                    </span>
                    <button class="button_allow" onclick="alert('恭喜你抢到了华为nova7 SE!')">抢购 </button>

                </div>
            </a>
        </div>
        <div class="item">
            <a href="#" class="product-link">
                <img src="//img12.360buyimg.com/seckillcms/s280x280_jfs/t1/144957/21/3917/192269/5f1fcf99E314ac8a7/75a2d6a7cabc3d72.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    雷公馆 毛呢大衣女秋冬新品毛呢外套羊毛呢宽松显瘦呢子大衣中长款单排扣品牌上衣 米白色 M
                </p>
                <div class="price">
                    <span class="price-new">
                        324.00
                    </span>
                    <span class="price-old">
                        908.00
                    </span>
                     <button class="button_allow" onclick="alert('恭喜你抢到了毛呢大衣!')">抢购 </button>
                </div>
            </a>
        </div>
    </div>


    <script>
        //  1、设置秒杀结束时间 转化为 time类型
        let endTime = new Date("2024-5-5 10:46:20").getTime(); //将时间转化为 毫秒，用于后续计算

        // 2、声明变量保存剩余的时间
        let hours, minutes, seconds = 0;

        //3、设置方法 用于计算是否到时间了
        function ms() {
            alert("秒杀开始了!")
            //4、设置定时器
           let interval =  window.setInterval(function () {
                let now = new Date();//获取当前时间
                //获取设置的时间差 remaining 差距
                let remaining = endTime - now.getTime();
                //只要时间差大于0 就可以进行倒计时 
                if (remaining > 0) {
                    //简易版：转化为还差多少秒
                    let seconds = parseInt(remaining / 1000);//还差多少秒 转化为整数秒
                    seconds = seconds < 10 ? "0"+seconds:seconds; //小于 0 则为0+秒数
                    document.getElementById("seconds").innerText = seconds;
                } else {
                    //结束了
                    alert("秒杀结束了!");
                    document.getElementById("seconds").innerText = "00";
                    //6、在停止后结束取消定时器
                    window.clearInterval(interval);

                    //让所有按钮修改弹出样式
                    let buttonList = document.getElementsByTagName("button");
                    for(let index = 0 ; index < buttonList.length; index ++){   
                        buttonList[index].setAttribute("disabled","true");//不再进行点击
                        buttonList[index].removeAttribute("onclick");//移除点击事件
                        buttonList[index].classList.replace("button_allow","button_forbid");
                    }
                }
            }, 1000);
        }
        //调用该方法
        ms();
    </script>
</body>

</html>

11、思考，如何实现小时，分钟，秒数的显示？

//参考代码
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>秒杀</title>
    <link rel="stylesheet" href="css/ms.css">

</head>

<body>
    <div class="container">
        <div class="item ms">
            <h2 class="title">
                商品秒杀
            </h2>

            <h3 class="subtitle">
                FLASH DEALS
            </h3>

            <i class="icon">
            </i>

            <p class="desc">
                本场距离结束时间
            </p>
            <div class="clock">
                <span id="hours" class="hour">00</span>
                <span class="point">:</span>
                <span id="minutes" class="minute">00</span>
                <span class="point">:</span>
                <span id="seconds" class="second">59</span>
            </div>
        </div>

        <div class="item">
            <a href="#" class="product-link">
                <img src="https://img20.360buyimg.com/seckillcms/s280x280_jfs/t28882/109/582315249/52026/e4ff99b9/5bf7cb37N98f8ac82.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    3M 节气门清洗剂【不伤镀层|多功能除油泥除积碳|8866升级】汽车金属件润滑节流阀去油污非化清剂PN18066
                </p>
                <div class="price">
                    <span class="price-new">
                        134.00
                    </span>
                    <span class="price-old">
                        208.00
                    </span>
                    <button class="button_allow" onclick="alert('恭喜你抢到了3M清洁剂!')">抢购 </button>

                </div>
            </a>
        </div>

        <div class="item">
            <a href="#" class="product-link">
                <img src="//img12.360buyimg.com/seckillcms/s280x280_jfs/t1/116581/22/13747/111761/5f2373f5E2f543b8f/8a64bb1f2303930b.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    华为nova7 SE 5G手机【12期免息可选/送碎屏险】 全网通 幻夜黑 8G+128G
                </p>
                <div class="price">
                    <span class="price-new">
                        1324.00
                    </span>
                    <span class="price-old">
                        4208.00
                    </span>
                    <button class="button_allow" onclick="alert('恭喜你抢到了华为nova7 SE!')">抢购 </button>

                </div>
            </a>
        </div>
        <div class="item">
            <a href="#" class="product-link">
                <img src="//img12.360buyimg.com/seckillcms/s280x280_jfs/t1/144957/21/3917/192269/5f1fcf99E314ac8a7/75a2d6a7cabc3d72.jpg.webp"
                    alt="商品" height="130">
                <p class="product-desc">
                    雷公馆 毛呢大衣女秋冬新品毛呢外套羊毛呢宽松显瘦呢子大衣中长款单排扣品牌上衣 米白色 M
                </p>
                <div class="price">
                    <span class="price-new">
                        324.00
                    </span>
                    <span class="price-old">
                        908.00
                    </span>
                     <button class="button_allow" onclick="alert('恭喜你抢到了毛呢大衣!')">抢购 </button>
                </div>
            </a>
        </div>
    </div>


    <script>
        //  1、设置秒杀结束时间 转化为 time类型
        let endTime = new Date("2024-5-11 11:26:20").getTime(); //将时间转化为 毫秒，用于后续计算

        // 2、声明变量保存剩余的时间
        let hours, minutes, seconds = 0;

        //3、设置方法 用于计算是否到时间了
        function ms() {
            alert("秒杀开始了!")
            //4、设置定时器
           let interval =  window.setInterval(function () {
                let now = new Date();//获取当前时间
                //获取设置的时间差 remaining 差距
                let remaining = endTime - now.getTime();
                //只要时间差大于0 就可以进行倒计时 

                if (remaining > 0) {
                    //简易版：转化为还差多少秒
                    hours = parseInt((remaining /1000/3600));  // 计算剩余小时（除以60*60转换为小时，获取剩余的小时）
                    minutes = parseInt((remaining /1000 / 60) % 60);    // 计算剩余分钟（除以60转为分钟，与60取模，获取剩余的分钟）
                    seconds = parseInt(remaining /1000 % 60 ); //计算60秒内还有几秒
                    hours = hours < 10 ? '0' + hours : hours;
                    minutes = minutes < 10 ? '0' + minutes : minutes;
                    seconds = seconds < 10 ? '0' + seconds : seconds;
                    console.log(hours + ","+minutes+","+seconds)
                    document.getElementById("hours").innerText = hours;
                    document.getElementById("minutes").innerText = minutes;
                    document.getElementById("seconds").innerText = seconds;
                } else {

                    //结束了
                    alert("秒杀结束了!");
                    document.getElementById("hours").innerText = "00";
                    document.getElementById("minutes").innerText = "00";
                    document.getElementById("seconds").innerText = "00";
                    //6、在停止后结束取消定时器
                    window.clearInterval(interval);

                    //让所有按钮修改弹出样式
                    let buttonList = document.getElementsByTagName("button");
                    for(let index = 0 ; index < buttonList.length; index ++){   
                        buttonList[index].setAttribute("disabled","true");//不再进行点击
                        buttonList[index].removeAttribute("onclick");//移除点击事件
                        buttonList[index].classList.replace("button_allow","button_forbid");
                    }
                }
            }, 1000);
        }
        //调用该方法
        ms();
    </script>
</body>

</html>