JavaScript （定时器）完成抢购案例

最新推荐文章于 2023-01-11 21:57:51 发布

smiling tiger

最新推荐文章于 2023-01-11 21:57:51 发布

阅读量775

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 css html5

本文链接：https://blog.youkuaiyun.com/weixin_45567213/article/details/122127496

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

html结构

<!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>抢购</title>
    <link rel="stylesheet" href="./css/test.css">
</head>
<body>
    <div class="cont">
        <ul>
            <li >
                <div class="cont-left">
                    <div class="iteam">
                        <div class="iteam-text1">
                            本次活动结束，敬请期待下
                        </div>
                        <div class="iteam-text2"> 次活动</div>
                    </div>
                    <img src="./img/小米音箱.jpg" alt="">
                    <div class="cont-left-text">
                    </div>
                </div>
                <div class="cont-right">
                    <div class="right-text1">
                        <h3>小米小爱蓝牙音箱随身版 huishduhsiji</h3>
                    </div>
                    <div class="right-text2">
                        小巧便携，一键唤醒小爱
                    </div>
                    <div class="right-text3">
                        <span class="practical">24.50元</span>
                        <span class="original"><del>49元</del></span>
                    </div>
                    <div class="right-btn">
                        <input type="button" class="btn" value="秒杀结束">
                    </div>
                </div>
            </li>
            <li>
                <div class="cont-left">
                    <div class="iteam">
                        <div class="iteam-text1">
                            本次活动结束，敬请期待下
                        </div>
                        <div class="iteam-text2"> 次活动</div>
                    </div>
                    <img src="./img/小米牙膏.jpg" alt="">
                    <div class="cont-left-text">
                    </div>
                </div>
                <div class="cont-right">
                    <div class="right-text1">
                        <h3>贝医生 0+ 防蛀健齿牙膏 10hvuidhvuhuivh</h3>
                    </div>
                    <div class="right-text2">
                        强健牙釉质 , 牙齿更坚固
                    </div>
                    <div class="right-text3">
                        <span class="practical">1.00元</span>
                        <span class="original"><del>12.9元</del></span>
                    </div>
                    <div class="right-btn">
                        <input type="button" class="btn" value="秒杀结束">
                    </div>
                </div>
            </li>
            <li>
                <div class="cont-left">
                    <div class="iteam">
                        <div class="iteam-text1">
                            本次活动结束，敬请期待下
                        </div>
                        <div class="iteam-text2"> 次活动</div>
                    </div>
                    <img src="./img/小米路由器.jpg" alt="">
                    <div class="cont-left-text">
                    </div>
                </div>
                <div class="cont-right">
                    <div class="right-text1">
                        <h3>小米路由器4C 白色 10hvuidhvuhuivh</h3>
                    </div>
                    <div class="right-text2">
                        小巧便携 ， 一键便携
                    </div>
                    <div class="right-text3">
                        <span class="practical">24.50元</span>
                        <span class="original"><del>49元</del></span>
                    </div>
                    <div class="right-btn">
                        <input type="button"  class="btn" value="秒杀结束">
                    </div>
                </div>
            </li>
            <li>
                <div class="cont-left">
                    <div class="iteam">
                        <div class="iteam-text1">
                            本次活动结束，敬请期待下
                        </div>
                        <div class="iteam-text2"> 次活动</div>
                    </div>
                    <img src="./img/小米旅行箱.png" alt="">
                    <div class="cont-left-text">
                    </div>
                </div>
                <div class="cont-right">
                    <div class="right-text1">
                        <h3>小米旅行箱 青春版 20英寸 10hvuidhvuhuivh</h3>
                    </div>
                    <div class="right-text2">
                       环保材料 ,  轻便重量
                    </div>
                    <div class="right-text3">
                        <span class="practical">199.00元</span>
                        <span class="original"><del>249元</del></span>
                    </div>
                    <div class="right-btn">
                        <input type="button" class="btn" value="秒杀结束">
                    </div>
                </div>
            </li>
            <li>
                <div class="cont-left">
                    <div class="iteam">
                        <div class="iteam-text1">
                            本次活动结束，敬请期待下
                        </div>
                        <div class="iteam-text2"> 次活动</div>
                    </div>
                    <img src="./img/小米电风扇.jpg" alt="">
                    <div class="cont-left-text">
                    </div>
                </div>
                <div class="cont-right">
                    <div class="right-text1">
                        <h3>米家直流落地变频扇 白色 10hvuidhvuhuivh</h3>
                    </div>
                    <div class="right-text2">
                        用科技创造自然风
                    </div>
                    <div class="right-text3">
                        <span class="practical">279.00元</span>
                        <span class="original"><del>349元</del></span>
                    </div>
                    <div class="right-btn">
                        <input type="button"  class="btn" value="秒杀结束">
                    </div>
                </div>
            </li>
            <li>
                <div class="cont-left">
                    <div class="iteam">
                        <div class="iteam-text1">
                            本次活动结束，敬请期待下
                        </div>
                        <div class="iteam-text2"> 次活动</div>
                    </div>
                    <img src="./img/小米燃气灶.jpg" alt="">
                    <div class="cont-left-text">
                    </div>
                </div>
                <div class="cont-right">
                    <div class="right-text1">
                        <h3>烟灶套装（天然气） </h3>
                    </div>
                    <div class="right-text2">
                        点火排烟 , 风随火动
                    </div>
                    <div class="right-text3">
                        <span class="practical">1999.00元</span>
                        <span class="original"><del>2298元</del></span>
                    </div>
                    <div class="right-btn">
                        <input type="button"  class="btn" value="秒杀结束">
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script src="./js/test.js"></script>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.cont{
    margin: 100px 100px;
   
}
.cont ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    padding-bottom: 20px;
    width: 2570px;
    background-color: rgb(230,230,230);
    padding-left: 20px;
    padding-right: 20px;
}
.cont li{
    display: flex;
    width: 800px;
    height: 400px;
    padding: 20px;
    margin-top: 20px;
    background-color: white;
    position: relative;
}
.cont-left img{
    width: 300px;
    height: 400px;
    background-color: rgb(214,234,243);
}
.cont-right{
    display: flex;
    margin-left: 20px;
    width: 480px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
}
.right-text1,.right-text2,.right-text3{
    width: 480px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.right-text1 h3{
    font-size: 36px;
}
.right-text2 {
    font-size: 30px;
}
.practical{
    font-size: 30px;
    color: tomato;
}
.original{
    padding: 10px 10px;
    font-size: 24px;
    color: grey;
}
.right-btn input{
    width: 300px;
    height: 60px;
    color: grey;
    font-size: 30px;
}
.iteam{
    position: absolute;
    width: 300px;
    height: 80px;
    background-color: rgba(240,96,96, 0.9   );
    border-radius:20px 0 0 0 ;
    font-size: 20px;
    text-align: center;
    color: white;

}
.iteam-text1{
    height: 40px;
    line-height: 40px;
}
.btn{
    border-radius: 5px;
    border: none;
    color: grey;
}

js部分

/***
 * 
 * date: 2021.12.23
 * name:@前端小白？
 * project： 抢购
 * 
 ***/
// 分析数据结构
var commodity=[
    {id:0,startDate:"2021-12-24 10:00:00",endDate:"2021-12-24 11:02"},
    {id:1,startDate:"2020-12-23 24:00:00",endDate:"2020-12-25 17:00"},
    {id:2,startDate:"2021-12-23 20:00:00",endDate:"2021-12-24 17:00"},
    {id:3,startDate:"2021-12-24 24:00:00",endDate:"2021-12-25 17:00"},
    {id:4,startDate:"2020-12-23 24:00:00",endDate:"2020-12-25 17:00"},
    {id:5,startDate:"2020-12-23 24:00:00",endDate:"2020-12-25 17:00"}
];
// 获取容器
var iteamText1=document.querySelectorAll(".iteam-text1")
var iteamText2=document.querySelectorAll(".iteam-text2")
var btn=document.querySelectorAll(".btn")

// 活动开始时间
var dates=0;
// 活动结束时间
var endDate=0;

// 时
var hours=0;
// 分
var min=0;
// 秒
var seconds=0;

// 定时器
for (let i = 0; i < commodity.length+1; i++) {
    var timer1=setInterval(()=>{rush(i)}, 1000);
}


// 工具函数
function rush(_index){
    // 获取当前时间
    dateTime= new Date();
    dateTime=dateTime.getTime(); 
    dates= new Date(commodity[_index].startDate);
    dates=dates.getTime(); 
    endDate= new Date(commodity[_index].endDate);
    endDate=endDate.getTime();

    if(dateTime>endDate){
        iteamText1[_index].innerHTML="抢购结束";
        iteamText2[_index].innerHTML="敬请期待";
        btn[_index].style.backgroundColor="rgb(239,239,239)";
        btn[_index].value="已抢光";
        btn[_index].style.color="gray";

    }else if(dateTime<dates){
        iteamText1[_index].innerHTML="距离抢购开始还有"; 
        btn[_index].value="即将开始";
        btn[_index].style.backgroundColor="greenyellow";
        btn[_index].style.color="white";

        hours=Math.floor((dates-dateTime)/3600000);
        min=Math.floor((dates-dateTime)/60000)%60;
        seconds=Math.floor((dates-dateTime)/1000)%60;

        iteamText2[_index].innerHTML=`${hours}小时${min}分钟${seconds}秒`;

        // console.log(hours);
        // console.log(min);
        // console.log(seconds+"秒");
    }else{
        // 关闭定时器
        if(dates-dateTime<=0){
            btn[_index].style.backgroundColor="grey";
            clearInterval(timer1); 
       }
        iteamText1[_index].innerHTML="抢购剩余时间"; 
        btn[_index].value="立即抢购";
        btn[_index].style.backgroundColor="tomato";
        btn[_index].style.color="white";

        hours=Math.floor((endDate-dateTime)/3600000);
        min=Math.floor((endDate-dateTime)/60000)%60;
        seconds=Math.floor((endDate-dateTime)/1000)%60;

        iteamText2[_index].innerHTML=`${hours}小时${min}分钟${seconds}秒`;

    }
}

仅供学习和参考使用。