京东秒杀倒计时(js)
生活随笔
收集整理的這篇文章主要介紹了
京东秒杀倒计时(js)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通過定時器，實現倒計時的效果
效果如圖：
這里是加快了計時器的間隔時間，所以速度比較快
話不多說，直接上代碼：
先是基礎布局 <body><h2 class="title">秒殺倒計時</h2><div class="box"><h1>京東秒殺</h1><h3 id="eng">FLASH DEALS</h3><img src="./img/flash.png" alt="flash" /><h3>本場距離結束還剩</h3><p><div class="bos"><span>01</span></div><div class="bos"><span>20</span></div><div class="bos"><span>40</span></div></p><div class="lay"></div></div></body>閃電圖片是自己處理過地，這里就不放了
樣式 <style type="text/css">.title {color: red;text-align: center;}.box {width: 270px;height: 400px;background: red;position: relative;left: 50%;margin-left: -135px;color: white;text-align: center;}.box h1 {padding-top: 20px;}#eng {margin-top: -15px;opacity: 0.7;}.box img {width: 100px;opacity: 0.8;}.bos{width:55px;height:45px;background:black;margin:8px;display: inline-block;}.bos span {font-weight:bold;font-size:30px;}.lay{background: red;width:207px;height:1px;position:absolute;top: 306px;left: 31px;}</style> 最后放上js部分 <script>var spans=document.querySelectorAll('span');// 定義三個變量來接收數字值var second=0;var minute=0;var hour=0;/* 為了讓三個數字都保持兩位顯示的樣式，這里定義一個函數,來解決掉重復的代碼id=操作的標簽,num=對應的數字(hour/minute/second) */function inner(id,num){if(num<10){id.innerHTML='0'+num;}else{id.innerHTML=num;}}var timer= setInterval(function(){// 在span標簽中的數字屬于文本，使用parseInt來轉換數據類型second=parseInt(spans[2].innerHTML);minute=parseInt(spans[1].innerHTML);hour=parseInt(spans[0].innerHTML);// 1.先做第三位數字的顯示second--;inner(spans[2],second);/* 2.在第三位數字歸零后判斷第二位數字的值，以確定是否需要將其值變為60來進行下一輪的倒計時 */if(second==0){if(minute !=0){minute--;second=59;}// 3.判斷第二位和第一位的值，與第二步同理if(minute==0){if(hour !=0){minute=59;hour--;}}// 4.如果三個值均為零，則清除定時器if(hour==0 && minute==0 && second ==0){clearInterval(timer);}// 5.記得調用函數回顯inner(spans[0],hour);inner(spans[1],minute);inner(spans[2],second);}},1000);</script>每個步驟都標注了注釋，不會的小伙伴可以看看，不過都是我自己的個人思路，實在看不懂得話也可以直接在評論區留言，一定會回的哦！
這里是萬物之戀，我們下次再見！
總結
以上是生活随笔為你收集整理的京东秒杀倒计时(js)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5二维动画教程,Flash二维动
- 下一篇： VOD崛起《暮光之城》带动电影同步发行模