Jquery版JS倒計(jì)時(shí) – JS筆記

    倒計(jì)時(shí)功能在很多場(chǎng)合都會(huì)用到,便捷的Jquery為倒計(jì)時(shí)功能帶來(lái)了更多可能性,一起來(lái)看看吧

    倒計(jì)時(shí)功能在很多場(chǎng)合都會(huì)用到,便捷的Jquery為倒計(jì)時(shí)功能帶來(lái)了更多可能性,一起來(lái)看看吧。

    HTML代碼:

    	 <section class="countdown-container" data-deadline="2025/06/01 12:20:00" data-current="2020/05/28 12:00:00"> 
    	  <h3 class="countdown-desc">距離網(wǎng)站正式上線還有:</h3> 
    	  <ul class="countdown-content"> 
    	   <li> <span class="digits days">00</span> <i>:</i> <span class="label">天</span> </li> 
    	   <li> <span class="digits hours">00</span> <i>:</i> <span class="label">時(shí)</span> </li> 
    	   <li> <span class="digits minutes">00</span> <i>:</i> <span class="label">分</span> </li> 
    	   <li> <span class="digits seconds">01</span> <span class="label">秒</span> </li> 
    	  </ul> 
    	 </section> 

    Jquery

    jQuery(document).ready(function ($) {
        var deadline = Date.parse( $(".countdown-container").data("deadline") ),
            current = Date.parse( $(".countdown-container").data("current") );
        if (deadline - current <= 0) {
            location.reload(true);
        };
        var x = setInterval(function() {
            var distance =  deadline - current,
                days = Math.floor( distance / (1000 * 60 * 60 * 24) ),
                hours = Math.floor( ( distance / (1000 * 60 * 60) ) % 24 ),
                minutes = Math.floor( (distance / 1000 / 60) % 60 ),
                seconds = Math.floor( (distance / 1000) % 60 );
            $(".digits.days").text(days);
            $(".digits.hours").text( ('0' + hours).slice(-2) );
            $(".digits.minutes").text( ('0' + minutes).slice(-2) );
            $(".digits.seconds").text( ('0' + seconds).slice(-2) );
            current += 1000;
            if (distance <= 0) {
                clearInterval(x);
                location.reload(true);
            };
        }, 1000);
    });

    注意:

    您可能需要引入Jquery.js

    怎么引入jquery.js? – wordpress開發(fā)

    簡(jiǎn)單的JS倒計(jì)時(shí) – JS筆記

    給TA贊賞
    共{{data.count}}人
    人已贊賞
    ??
    Npcink上的部份代碼及教程來(lái)源于互聯(lián)網(wǎng),僅供網(wǎng)友學(xué)習(xí)交流,若您喜歡本文可附上原文鏈接隨意轉(zhuǎn)載。
    無(wú)意侵害您的權(quán)益,請(qǐng)發(fā)送郵件至 1355471563#qq.com 或點(diǎn)擊右側(cè) 私信:Muze 反饋,我們將盡快處理。
    ?
    購(gòu)物車
    優(yōu)惠劵
    搜索
    主站蜘蛛池模板: 成人无码AV一区二区| 国产成人精品无码一区二区三区| 中文字幕在线观看一区| 亚洲福利视频一区| 国产精品高清一区二区三区不卡| 色窝窝无码一区二区三区 | 国产伦精品一区二区三区在线观看| 中文字幕在线精品视频入口一区| 国产成人久久一区二区不卡三区| 日韩十八禁一区二区久久| 竹菊影视欧美日韩一区二区三区四区五区 | 亚洲av无码片区一区二区三区| 大香伊蕉日本一区二区| 无码成人一区二区| 国产a∨精品一区二区三区不卡| 亚洲美女视频一区| 国产高清视频一区三区| 国产激情一区二区三区 | 国产人妖视频一区二区破除| 亚洲日韩AV一区二区三区中文| 亚洲A∨无码一区二区三区 | 精品一区二区三区色花堂| 日韩AV片无码一区二区不卡| 性色AV一区二区三区无码| 色狠狠色狠狠综合一区| 精品亚洲AV无码一区二区| 精品国产一区二区三区色欲| 日本精品高清一区二区2021| 果冻传媒董小宛一区二区| 久久久久久综合一区中文字幕| 国产精品区一区二区三在线播放| 成人欧美一区二区三区在线视频 | 国产精品一区在线播放| 亚洲福利秒拍一区二区| 国产免费一区二区三区不卡| 精品日产一区二区三区手机| 国产一区二区内射最近更新| 老熟妇仑乱视频一区二区| 久久人妻无码一区二区| 色狠狠一区二区三区香蕉蜜桃 | 亚洲国产一区视频|