jQuery-倒計時


$(function(){
    var tYear = "";        //輸入的年份
    var tMonth = "";    //輸入的月份
    var tDate = "";        //輸入的日期
    var iRemain = "";    //開始和結束之間相差的毫秒數
    var sDate = "";        //倒計的天數
    var sHour = "";        //倒計時的小時
    var sMin = "";        //倒計時的分鍾
    var sSec = "";        //倒計時的秒數
    var sMsec = "";        //毫秒數

    //通用工具函數,在個位數上加零,根據傳的N的參數,來設前面加幾個零
    function setDig(num,n){
        var str = ""+num;
        while(str.length<n){
            str="0"+str
        }
        return str;
    }
    
    //獲得相差的天,小時,分鍾,秒
    function getdate(){
        
        //創建開始時間和結束時間的日期對象
        var oStartDate = new Date();
        var oEndDate = new Date();
        
        //獲取文本框的值
        tYear = $("#tyear").val();
        tMonth = $("#tmonth").val();
        tDate = $("#tdate").val();
        
        //設置結束時間
        oEndDate.setFullYear(parseInt(tYear));
        oEndDate.setMonth(parseInt(tMonth)-1);
        oEndDate.setDate(parseInt(tDate));
        oEndDate.setHours(0);
        oEndDate.setMinutes(0);
        oEndDate.setSeconds(0);
        
        //求出開始和結束時間的秒數(除以1000)
        iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000;
        
        //總的秒數除以一天的秒數,再取出整數部分,就得出有多少天。
        sDate = setDig(parseInt(iRemain/(60*60*24)),3);
        //總的秒數除以一天的秒數,然后取其中的余數,就是把整數天扣除之后,剩下的總秒數。
        iRemain %= 60*60*24;
        
        //剩下的總秒數除以一個小時的秒數,再取整數部分,就是有多少小時。
        sHour = setDig(parseInt(iRemain/(60*60)),2)
        
        //剩下的總秒數除以一個小時的秒數,再取其余數,這個余數,就是扣除小時這后,剩下的總秒數。
        iRemain %= 60*60;
        
        //剩下的總秒數除以一分鍾的秒數,再取其整數部分,就是有多少分鍾。
        sMin = setDig(parseInt(iRemain/60),2)
        
        //剩下的總秒數除以一分鍾的秒數,再取其余數,這個余數,就是扣除分鍾之后,剩下的總秒數。
        iRemain%=60;
        
        //剩下的秒數
        sSec = setDig(iRemain,2);
        
        //毫秒數
        sMsec = sSec*100;        
    }
    
    //更改顯示的時間
    function updateShow(){
        $(".showdate span").text(tYear+"-"+tMonth+"-"+tDate);
        $(".count span").each(function(index, element) {
            if(index==0){
                $(this).text(sDate);
            }else if(index==1){
                $(this).text(sHour);
            }else if(index == 2){
                $(this).text(sMin);
            }else if(index == 3){
                $(this).text(sSec);
            }else if(index == 4){
                $(this).text(sMsec);
            }    
        });
    }
    
    //每一秒執行一次時間更新
    function autoTime(){
        getdate();
        //如果小於零,清除調用自己,並且返回
        if(iRemain<0){
            clearTimeout(setT);
            return;
        }
        updateShow();
        var setT = setTimeout(autoTime,1000);
        
    }
    
    //點擊按鈕開始計時
    $("button").click(function(){
            autoTime();
    })
})

昨天看了“妙味課堂”的倒計時視頻,自己學着寫了下。

記錄需要注意的地方:

  1.取模運算:

  iRemain %= 60*60*24;  
  
  就是返回余數,在這個實例中的余數,就是把整數拿走后,剩下的秒數。

 2.工具函數 setDig(num,n)


  可以根據傳入的參數,自動在傳入的數字前加零

DEMO下載


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM