<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>秒殺</title> <!--這個是一個比較小的demo,大家可以相互討論--> <style> body,div { margin: 0; padding: 0; font-family: "微軟雅黑"; -webkit-user-select: none; } #time { width: 500px; height: 50px; margin: 40px auto 0; line-height: 50px; text-align: center; font-size: 20px; color: red; background-color: aquamarine; border: 2px dashed navy; } </style> </head> <div id="time"></div> <body> <script> //這裏要用構造函數去new一個時間,也就是我們期望的時間(目標時間) var targetTime=new Date("2018/11/11 11:11:11"); var oDiv=document.getElementById("time"); //然後獲取本地的時間,用我們目標時間-本地時間,就是需要多長時間,我們要做的就是對這個時間差進行操作,讓他倒計時 //一說到倒計時,我們應該要想到的事定時器, function secKill() { var timer=null; window.clearInterval(timer); //這裏是我們奪取的當地時間(也就是你這臺電腦上的時間) var nowTime=new Date(); //這個就是時間差 var diffTime=targetTime-nowTime; //console.log(diffTime);//結果是毫秒數 //我們首先要思考怎麼去把時間按年 月 日 分開?? //下面我給大家計算一下 //1年=12個月,1個月=30天,1天=24H,1H=60min,1min=60s,1s=1000ms //打個比方:10裏面有幾個4 ? 是不是商2餘5 ?那麼這樣就確定有2個4,但是餘數就不能算 //同理我們用時間差這個時間除以換算過來的毫秒數,即1個月=(1000*60*60*24*30)ms //這裏要注意的是我們不能四捨五入,只取 "商",餘數要繼續往下取 "商",即月,日,時,分,秒 //大家可以好好理解一下,最好是拿個筆計算一下----->有助於理解 var months=Math.floor(diffTime/(1000*60*60*24*30)); var dates=Math.floor(diffTime%(1000*60*60*24*30)/(1000*60*60*24)); var hours=Math.floor(diffTime%(1000*60*60*24*30)%(1000*60*60*24)/(1000*60*60)); var minues=Math.floor(diffTime%(1000*60*60*24*30)%(1000*60*60*24)%(1000*60*60)/(1000*60)); var second=Math.floor(diffTime%(1000*60*60*24*30)%(1000*60*60*24)%(1000*60*60)%(1000*60)/1000); //求出相應的時間後,我們進行字符串的拼接,讓他更加形象 var s=months+"個月"+dates+"日"+hours+"小時"+minues+"分鐘"+second+"秒"; //console.log(s); oDiv.innerHTML="距離雙十一還剩:["+ s+"]"; //這裏就是作出判斷,當目標時間於本地時間相差小於1s的時候,打開鏈接 if(diffTime<=1000){ oDiv.innerHTML="<a href='http://item.jd.com/2123282.html?cpdad=1DLSUE'>前往秒殺~</a>"; } } secKill(); timer=window.setInterval(secKill,1000); </script> </body> </html>
原生JS倒計時
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章