JavaScript實現京東秒殺效果
本文實例為大傢分享瞭JavaScript實現京東秒殺效果的具體代碼,供大傢參考,具體內容如下
首先先利用html和css搭出架子:
* { 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, 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%; 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>
再來設計其邏輯部分:
獲取相關元素
定義一個處理兩個時間差的函數,需要註意的是對於小時、分鐘、秒鐘如果小於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.將差值設置給元素 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, } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- JavaScript實現前端網頁版倒計時
- JavaScript實現動態數字時鐘
- javascript實現倒計時小案例
- 利用JavaScript實現春節倒計時效果(移動端和PC端)
- JavaScript實現限時秒殺功能