1. 程式人生 > 程式設計 >JavaScript實現京東秒殺效果

JavaScript實現京東秒殺效果

本文例項為大家分享了實現京東秒殺效果的具體程式碼,供大家參考,具體內容如下

JavaScript實現京東秒殺效果

首先先利用html和搭出架子:

* {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 190px;
            height: 270px;
            color: #fff;
            text-align: center;
            margin: 100px auto;
            background-color: #d00;
            padding-top: 40px;
            box-sizing: border-box;
        }
        
        .box>h3 {
            font-size: 26px;
        }
        
        .box>p:nth-of-type(1) {
            color: rgba(255,255,.5);
            margin-top: 5px;
        }
        
        .box>i {
            display: inline-block;
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 40px;
        }
        
        .box>.time {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        
        .time>div {
            width: 40px;
            height: 40px;
            background: #333;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            position: relative;
        }
        
        .time>div::before {
            content: "";
            display: block;
            width: 100%;www.cppcns.com
height: 2px; background: #d00; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .time>.minute { margin: 0 10px; }
<div class="box">
        <h3>京東秒殺</h3>
        <p>FLASH DEALS</p>
        <i class="iconfont icon-lightningbshandian"></i>
        <p>本場距離結束還剩</p>
        <div class="time">
            <div class="hour">00</div>
            <div class="minute">00</div>
            <div class="second">00</div>
        </div>
 </div>

JavaScript實現京東秒殺效果

再來設計其邏輯部分:

獲取相關元素

定義一個處理兩個時間差的函式,需要注意的是對於小時、分鐘、秒鐘如果小於10,那麼應該在前面新增“0”來佔位,最後利用物件的形式將其返回

為了實現其一個動態的效果,我們可以利用setInterval(),將獲取到的時分秒全部放入進去,使其每隔一秒就變化一次

為了使用者一開啟就能看到效果,我們可以將獲取到的時分秒封裝到一個函式裡,在setInterval()裡和外直接呼叫函式即可實現

//1.獲取需要操作的元素
const oHour = document.querySelector(".hour");
const oMinute = document.querySelector(".minute");
const oSecond = document.querySelector(".second");
 
//2.處理時間差
 const remDate = new Date("2021-10-28 23:59:59");
 
        setTime(remDate);
 
        //開啟定時器
        setInterval(function() {
            setTime(remDate);
        },1000);
 
        //為了讓使用者一進來就看得到效果,而不是先是三個00
        // 我們可以對其進行封裝處理
        function setTime(remDate) {
            const obj = getDifferTime(remDate);
            // console.log(obj);
 
            //3.http://www.cppcns.com
將差值設定給元素 oHour.innerText = obj.hour; oMinute.innerText = obj.minute; oSecond.innerText = obj.second; } function getDifferTime(remDate,curDate = new Date()) { //1.得到兩個時間之間的差值(毫秒) const differTime = remDate - curDate; //2.得到兩個時間之間的差值(秒 ) const differSecond = differTime / 1000; //3.利用相差的總秒數 / 每一天的秒數 = 相差的天數 let day = Math.floor(differSecond / (60 * 60 * 24)); day = day >客棧= 10 ? day : "0" + day; //4.利用相差的總秒數 / 小時 % 24 let hour = Math.floor(differSecond / (60 * 60) % 24); hour = hour >= 10 ? hour : "0" + hour; //5.利用相差的總秒數 / 分鐘 % 60 let minute = Math.floor(differSecond / 60 % 60); minute = minute >= 10 ? minute : "0" + minute; // 6.利用相差的總秒數 % 秒數 let second = Math.floor(differSecond % 60); second = second >= 10 ? second : "0" + second; return { day: day,hour: hour,minute: minute,second: second,} 程式設計客棧}

JavaScript實現京東秒殺效果

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。