仿京东秒杀倒计时

下课别走

于 2023-04-08 13:34:12 发布

阅读量174

点赞数

分类专栏： Html 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_42862167/article/details/130016881

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

目标：
使用加速器实现倒计时效果，并将剩余时间显示
代码里面另外引用了iconfont矢量图标库，感兴趣的可以看一下官网的案例，我的代码包链接提取码：7pas

<link rel="stylesheet" href="iconfont/iconfont.css">

HTML5部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/jd.css">
    <title>京东秒杀</title>
</head>
<body>
    <div class="JDBox">
        <p class="secKill">京东秒杀</p>
        <p class="en">FLASH DEALS</p>
        <p class="iconfont icon-shandian"></p>
        <p class="spare">本场距离结束还剩</p>
        <div class="time">
            <p class="hour" id="hour"></p>
            <p class="min" id="min"></p>
            <p class="sec" id="sec"></p>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <script src="js/jd.js"></script>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.JDBox>p{
    text-align: center;
}

.JDBox{
    margin-top: 40px;
    margin-left: 60px;

    display: flex;
    flex-direction: column;
    align-content: center;
    width: 230px;
    height: 340px;
    background-color: rgb(234,54,50);
}

.JDBox>.secKill{
    margin-top: 50px;
    margin-bottom: 5px;
    color: white;
    font-size: 40px;

}

.JDBox>.en{
    color: rgb(245,167,165);
    font-size: 23px;
}

.JDBox>p:nth-child(3){
    margin-top: 8px;
    margin-bottom: 16px;
    color: white;
    font-size: 46px;
}

.JDBox>.spare{
    margin-bottom: 25px;
    color: white;
    font-size: 19px;
}

.JDBox>.time{
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    width: 157px;
    height: 52px;
    /*background-color: pink;*/
}
.JDBox>.time>div{
    width: 48px;
    height: 25px;
    background-color: rgb(47,52,58);
}

.JDBox>.time>p{
    position: absolute;
    width: 38px;
    height: 38px;
    /*background-color: #0a6ebd;*/
    line-height: 38px;
    text-align: center;
    font-size: 25px;
    color: white;
}

.JDBox>.time>.hour{
    top: 7px;
    left: 5px;
}

.JDBox>.time>.min{
    top: 7px;
    left: 59px;
}

.JDBox>.time>.sec{
    top: 7px;
    left: 114px;
}

JavaScript部分

/**
 * 计算时间差，获取所剩 【小时，分钟，秒】
 * @return {(number|number)[]}
 */
const getTime =()=> {
    let nowTime = new Date(),
        endTime = new Date("2023-04-04 17:30:00"),
        leftTime = endTime - nowTime,
        hour = Math.floor(leftTime / (1000 * 60 * 60)),  //计算小时
        min = Math.floor(leftTime / (1000 * 60) % 60),  //计算分钟
        sec = Math.floor((leftTime / 1000) % 60);  //计算秒
    if(leftTime>=0){
        return [hour,min,sec];
    }else{
        return [];
    }
}

const showTime = (handle=null) => {
    document.querySelector('#sec').innerText
        = getTime().toString();
    if(getTime().length>0){
        hour.innerText = getTime()[0].toString();
        min.innerText = getTime()[1].toString();
        sec.innerText = getTime()[2].toString();
    }else{
        hour.innerText = "0";
        min.innerText = "0";
        sec.innerText = "0";
        clearInterval(handle);
    }
}

let hour = document.querySelector('#hour');
let min = document.querySelector('#min');
let sec = document.querySelector('#sec');

setInterval(()=>{
    showTime(this);
},1000);

document.addEventListener("DOMContentLoaded",()=>{
    showTime();
});