Heim > Web-Frontend > js-Tutorial > Implementierungscode für das JQuery-Countdown-Applet

Implementierungscode für das JQuery-Countdown-Applet

小云云
Freigeben: 2018-02-05 14:27:24
Original
1674 Leute haben es durchsucht

jQuery kann die Countdown-Funktion im Detail vorstellen. Interessierte Freunde können darauf verweisen.

html


<p id="shop_rec">
  <ul class="cf">
    <li>
      <img src="image/goods.jpg" alt="小米 Note 顶配版" />
      <p>
        <h5>小米 Note 顶配版</h5>
        <p>全网通 香槟金 移动联通<br />双4G手机 双卡双待</p>
        <em>¥2998<i>起</i></em>
        <span class="time" data-starttime="1445982375" data-endtime="1446350400"></span>
      </p>
    </li>
    <li>
      <img src="image/goods.jpg" alt="小米 Note 顶配版" />
      <p>
        <h5>小米 Note 顶配版</h5>
        <p>全网通 香槟金 移动联通<br />双4G手机 双卡双待</p>
        <em>¥2998<i>起</i></em>
        <span class="time" data-starttime="1445912375" data-endtime="1436350400"></span>
      </p>
    </li>
  </ul>
</p>
Nach dem Login kopieren

jquery


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

  // 定时器函数
  function actionDo(){
    return setInterval(function(){
      timeObj.each(function(index, el) {
        var t = $(this),
          surplusTime = t.data(&#39;endtime&#39;) -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();
});
Nach dem Login kopieren

Zusammenfassung

Es ist nicht besonders gut, aber für kleine Anwendungen überhaupt kein Problem.

Verwandte Empfehlungen:

JQuery-Implementierungscode für Countdown- und SMS-Countdown-Funktionen

Das obige ist der detaillierte Inhalt vonImplementierungscode für das JQuery-Countdown-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage