javascript實現倒計時并彈窗提示特效

2024-05-06 16:21:27

字體：大中小

來源：轉載

供稿：網友

倒計時的功能在我們做項目的時候會經常遇到，這里給大家分享的是個人編寫的一個簡易的效果代碼，有需要的小伙伴可以參考下

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