javascript實現倒計時並彈窗提示特效_javascript技巧

在前端開發中，難免會用到倒計時。如做的雙十一活動，在距活動開始的半個月前需要做些宣傳工作，需要告知使用者優惠活動什麼時候開始。這個時候就要用到倒計時，如在整站的某個頁面提醒使用者活動什麼時候開始等。而在活動的後期，特別是在距活動結束僅有1天左右時，就要用到彈窗倒計時。這個倒計時設定在整站的首頁頂部（當然也可以設定在其它地方，如首頁中部等），並設定彈窗彈出10秒後自動消失，由使用者決定是否點擊到相應的活動頁面，購買產品。

需要的支援人員：CSS3，jQuery庫；

HTML代碼如下：

<section class="the_body">  <div class="countdown">    <h3>距中國雄於地球之日還有</h3>    <div class="countdown_time">     <span class="the_days"><i>0</i><i>3</i></span>     <i class="date_text">天</i>     <span class="the_hours"><i>0</i><i>7</i></span>     <i class="date_text">時</i>     <span class="the_minutes"><i>4</i><i>7</i></span>     <i class="date_text">分</i>     <span class="the_seconds"><i>1</i><i>1</i></span>     <i class="date_text">秒</i>    </div>  </div></section>

css代碼如下：

.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}.countdown{background:#ffec20;padding: 10px 0;}.countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;}.countdown .countdown_time{display:block;width:100%;text-align:center;}.countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff;margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight:bold;}.countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;bottom:1px;left:0;}.countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;bottom:3px;left:0;}.countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none;border-bottom:none;text-decoration:none;padding: 0;}.countdown .countdown_time .date_text:after{content:"";border:none;}.countdown .countdown_time .date_text:before{content:"";border:none;}

JavaScript代碼如下：

<script>function remaintime() { var date = new Date("Jan 1,2015 00:00:00");//設定倒計時結束時間 var nowdate = new Date();//擷取當前日期 var remaintime = date.getTime() - nowdate.getTime();//擷取現在到倒計時結束時間的毫秒數 var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//計算求得剩餘天數 var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//計算求得剩餘小時數 var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//計算求得剩餘分鐘數 var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *    1000 * 60) / (1000));//計算求得剩餘秒數 //當剩餘天數小於10時，就在其前加一個0，以下剩餘小時數、分鐘數與秒數與此相同 if (remainday < 10) {  remainday = "0" + remainday; }else{remainday+=""; //當剩餘天數大於10時，剩餘天數為數值，這是需要將該值轉換為字串，以下的剩餘小時數、分鐘數與秒數與此相同} if (remainhour < 10) {  remainhour = "0" + remainhour; }else{remainhour+="";} if (remainminute < 10) {  remainminute = "0" + remainminute; }else{remainminute+="";} if (remainsecond < 10) {  remainsecond = "0" + remainsecond; }else{remainsecond+="";} $(".the_days i:first-child").html(remainday.substr(0, 1)); $(".the_days i:last-child").html(remainday.substr(1, 2)); $(".the_hours i:first-child").html(remainhour.substr(0, 1)); $(".the_hours i:last-child").html(remainhour.substr(1, 2)); $(".the_minutes i:first-child").html(remainminute.substr(0, 1)); $(".the_minutes i:last-child").html(remainminute.substr(1, 2)); $(".the_seconds i:first-child").html(remainsecond.substr(0, 1)); $(".the_seconds i:last-child").html(remainsecond.substr(1, 2)); setTimeout("remaintime()",1000);//設定1秒後調用remaintime函數}remaintime();setTimeout(function(){$(".countdown").hide();},10000);//在首頁設定的彈窗效果，在分頁這段代碼可以不設定</script>

這是我自己寫的倒計時效果，當然每個人都可以根據自己的愛好，設定倒計時的效果。如你可以只顯示“幾天幾時幾分”，但個人覺得沒有設定到“幾天幾時幾分幾秒”夠氣氛。這裡的樣式也都可以根據自己的喜好改動，但最終的效果都是製造活動開始前的火熱氛圍。

至於這裡的html代碼、css代碼及JavaScript代碼需要注意的也說下：

1.html代碼就不多說，主要就是怎麼設定dom，以易於JavaScript操作；

2.css代碼，這裡主要用了:before與:after偽類，設定倒計時數值的立體效果；

3.JavaScript代碼也是很簡單的一個函數，這裡你需要將得到的剩餘時間轉換為字串，以便於字串的截取顯示等。另外，用setTimeout函數設定隔1秒執行一次函數，以動態顯示剩餘時間，當然也可以用setInterval函數，這兩個函數設定的效果基本相同。

至此，一個簡單的倒計時效果就做出來了。如果要在首頁設定彈窗倒計時，你可以把背景設定的更炫酷一點，這樣可以吸引使用者點擊，並設定10秒後彈窗自動消失（或者設定一個關閉按鈕等）。

倒計時的實現可以有很多種方式，在這裡也就先介紹這一種，以後有時間將會繼續總結。

以上所述就是本文的全部內容了，希望能夠對大家瞭解javascript有所協助。