【jquery】簡單的倒計時效果


前天做了一個活動項目,其中有一塊需要做倒計時的效果,由於需求比較簡單,所以也就沒用網上各種倒計時的插件。今天抽空整理出來,分享給大家。

html 代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>倒計時效果</title>
    <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
    <style type="text/css">
    #countDown{font-size:48px;line-height:10;text-align:center;}
    </style>
</head>
<body>
    <div id="countDown"></div>
</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function countDown(years,months,days,hours,minutes){
    var dateFinal = new Date(years,months,days,hours,minutes);    //設置倒計時到達時間
    var dateNow = new Date();    //獲取系統當前時間
    var dateSub = dateFinal - dateNow;    //計算差值,單位毫秒
    var day = hour = minute = second = dayBase = hourBase = minuteBase = secondBase = 0;    //初始化各個數值
    var timeHtml = '';
    timeHtml += '距離' + years + '' + toDouble(months + 1) + '' + toDouble(days) + '' + toDouble(hours) + '' + toDouble(minutes) + '分還剩下';
    dayBase = 24 * 60 * 60 * 1000;    //計算天數的基數,單位毫秒。1天等於24*60*60*1000毫秒
    hourBase = 60 * 60 * 1000;    //計算小時的基數,單位毫秒。1小時等於60*60*1000毫秒
    minuteBase = 60 * 1000;    //計算分鍾的基數,單位毫秒。1分鍾等於60*1000毫秒
    secondBase = 1000;    //計算秒鍾的基數,單位毫秒。1秒鍾等於1000毫秒
    day = Math.floor(dateSub / dayBase);    //計算天數,並取下限值。如 5.9天 = 5天
    hour = Math.floor(dateSub % dayBase / hourBase);    //計算小時,並取下限值。如 20.59小時 = 20小時
    minute = Math.floor(dateSub % dayBase % hourBase / minuteBase);    //計算分鍾,並取下限值。如 20.59分鍾 = 20分鍾
    second = Math.floor(dateSub % dayBase % hourBase % minuteBase / secondBase);    //計算秒鍾,並取下限值。如 20.59秒 = 20秒
    //當天數小於等於0時,就不用顯示
    if(day <= 0){
        timeHtml += toDouble(hour) + '' + toDouble(minute) + '' + toDouble(second) + '';
    }else{
        timeHtml += day + '' + toDouble(hour) + '' + toDouble(minute) + '' + toDouble(second) + '';
    }
    $('#countDown').html(timeHtml);
}
//當小時,分鍾和秒鍾小於 10 的時候會顯示為個位數,比較難看,需要在前面加 0。
function toDouble(num){
    if(num < 10){
        return '0'+ num;
    }else{
        return '' + num;
    }
}
$(function(){
    setInterval(function(){
        countDown(2013,4,1,10,0);
    },1000);
});
</script>

PS:

1、以上是本人通過所學的 jquery 知識,隨意寫的一些效果。

2、在 javascript 中月份的編號是從 0 開始的,即 4 表示為 5 月份。

3、該效果是依據系統時間來計算的,並不是按照服務器時間來計算。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com