這篇文章主要為大家展示了“jquery如何實現倒計時小應用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jquery如何實現倒計時小應用”這篇文章吧。

網站建設哪家好，找成都創新互聯！專注于網頁設計、網站建設、微信開發、重慶小程序開發公司、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了樂陵免費建站歡迎大家使用！

具體內容如下

html

<div id="shop_rec">
  <ul class="cf">
    <li>
      <img src="image/goods.jpg" alt="小米 Note 頂配版" />
      <div>
        <h6>小米 Note 頂配版</h6>
        <p>全網通 香檳金 移動聯通<br />雙4G手機 雙卡雙待</p>
        <em>&yen;2998<i>起</i></em>
        <span class="time" data-starttime="1445982375" data-endtime="1446350400"></span>
      </div>
    </li>
    <li>
      <img src="image/goods.jpg" alt="小米 Note 頂配版" />
      <div>
        <h6>小米 Note 頂配版</h6>
        <p>全網通 香檳金 移動聯通<br />雙4G手機 雙卡雙待</p>
        <em>&yen;2998<i>起</i></em>
        <span class="time" data-starttime="1445912375" data-endtime="1436350400"></span>
      </div>
    </li>
  </ul>
</div>

jquery

$(function(){
  var abj = $("#shop_rec"),
    timeObj = abj.find('.time');
  var starttime = timeObj.data('starttime');

  // 定時器函數
  function actionDo(){
    return setInterval(function(){
      timeObj.each(function(index, el) {
        var t = $(this),
          surplusTime = t.data('endtime') -starttime;
        if (surplusTime <= 0) {
          t.html("活動已經開始");
        } else{
          var year = surplusTime/(24*60*60*365),
            showYear = parseInt(year),
            month = (year-showYear)*12,
            showMonth = parseInt(month),
            day = (month-showMonth)*30,
            showDay = parseInt(day),
            hour = (day-showDay)*24,
            showHour = parseInt(hour),
            minute = (hour-showHour)*60,
            showMinute = parseInt(minute),
            seconds = (minute-showMinute)*60,
            showSeconds = parseInt(seconds);
          t.html("");
          if (showYear>0) {
            t.append("<span>"+showYear+"年</span>")
          };
          if (showMonth>0) {
            t.append("<span>"+showMonth+"月</span>")
          };
          if (showDay>0) {
            t.append("<span>"+showDay+"天</span>")
          };
          if (showHour>=0) {
            t.append("<span>"+showHour+"小時</span>")
          };
          if (showMinute>=0) {
            t.append("<span>"+showMinute+"分鐘</span>")
          };
          if (showSeconds>=0) {
            t.append("<span>"+showSeconds+"秒</span>")
          };
        };
      });
      starttime++;
    },1000); // 設定執行或延時時間
  };
  // 執行它
  actionDo();
});

以上是“jquery如何實現倒計時小應用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

當前標題：jquery如何實現倒計時小應用
當前路徑：http://newbst.com/article26/gdosjg.html

成都網站建設公司_創新互聯，為您提供商城網站、品牌網站設計、ChatGPT、全網營銷推廣、網站建設、網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯