倒计时

倒计时

HTML

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
        <script src="http://demo.htmleaf.com/1502/201502111828/js/jquery.knob.js"></script>
        <script src="http://demo.htmleaf.com/1502/201502111828/js/jquery.throttle.js"></script>
        <script src="http://demo.htmleaf.com/1502/201502111828/js/jquery.classycountdown.js"></script>
        <link rel="stylesheet" type="text/css" href="http://demo.htmleaf.com/1502/201502111828/css/jquery.classycountdown.css" />
        <style>
            .ClassyCountdownDemo { margin:0 auto 30px auto; max-width:800px; width:calc(100%); padding:30px; display:block }
            #countdown2 { background:#FFF }
            #countdown3 { background:rgb(52, 73, 94) }
            #countdown4 { background:#222 }
            #countdown5 { background:#222 }
            #countdown6 { background:#222 }
            #countdown7 { background:#222 }
            #countdown8 { background:#222 }
            #countdown9 { background:#FFF }
            #countdown10 { background:#3498db }
        </style>
        
        
        
        <div class="block">
                <div class="block-title">
                    <h2>Example</h2>
                </div>
                <div class="clearfix">
                    <div id="countdown2" class="ClassyCountdownDemo"></div>
                    <div id="countdown4" class="ClassyCountdownDemo"></div>
                    <div id="countdown3" class="ClassyCountdownDemo"></div>
                    <div id="countdown10" class="ClassyCountdownDemo"></div>
                    <div id="countdown9" class="ClassyCountdownDemo"></div>
                    <div id="countdown15" class="ClassyCountdownDemo"></div>
                    <div id="countdown16" class="ClassyCountdownDemo"></div>
                    <div id="countdown17" class="ClassyCountdownDemo"></div>
...

JavaScript

(function($) {
    var lastSecond = $("#lastSecond").html();
    var SysSecond = parseInt(lastSecond, 10),
        InterValObj = window.setInterval(function() {
            SetRemainTime();
        }, 1000),
        $J_time = $(".J-time");
    var second, minite, hour, day, allTime;

    function SetRemainTime() {
        if(!SysSecond) {
            return false;
        };
        if(SysSecond > 0) {
            SysSecond = SysSecond - 1;
            var second = Math.floor(SysSecond % 60),
                minite = Math.floor((SysSecond / 60) % 60),
                hour = Math.floor((SysSecond / 3600) % 24),
                day = Math.floor(((SysSecond / 3600) / 24) % 24);
            if(second < 10) {
                second = "0" + second;
            }
            if(minite < 10) {
                minite = "0" + minite;
            }
            if(hour < 10) {
                hour = "0" + hour;
            }
            allTime = day + "Day" + " " + hour + " : " + minite + " : " + second;
            $J_time.html(allTime);
        } else {
            window.clearInterval(InterValObj);
            alert("The activity is ended");
        }
    }
})(jQuery);

jQuery(function($) {
    var $J_time_s = $('.J-time-s');
    var lastSecond = $("#lastSecond").html();
    var SysSecond = parseInt(lastSecond, 10); /*这里获取倒计时的起始时间*/

    /*间隔函数,0.1秒执行*/
    var InterValObj = window.setInterval(function() {
        SetRemainTime();
    }, 100);

    /*将时间减去0.1秒，计算天、时、分、秒*/
    function SetRemainTime() {
        if(!SysSecond) {
            return false;
        };
        if(SysSecond > 0) {
            SysSecond = (SysSecond - 0.1).toFixed(1);
            var second = Math.floor(SysSecond % 60);
            var minite = Math.floor((SysSecond / 60) % 60);
            var hour = Math.floor((SysSecond / 3600) % 24);
            var seconds = Math.floor((SysSecond * 10) % 10);
            if(second < 10) {
                second = "0" + second;
            }
           ...