首頁 >web前端 >js教程 >javascript實現倒數計時並彈出式提示特效_javascript技巧

javascript實現倒數計時並彈出式提示特效_javascript技巧

WBOY
WBOY原創
2016-05-16 15:56:312288瀏覽

在前端開發中,難免會用到倒數計時。如做的雙十一活動,在距離活動開始的半個月前需要做些宣傳工作,需要告知用戶優惠活動何時開始。這時候就要用到倒數計時,如在整站的某個頁面提醒用戶活動何時開始等。而在活動的後期,特別是在距離活動結束僅有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有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn