suchen

Heim  >  Artikel  >  Web-Frontend  >  jQuery-Implementierungscode für Countdown- und SMS-Countdown-Funktionen

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

小云云
小云云Original
2018-02-05 14:24:221765Durchsuche

Dieser Artikel teilt Ihnen hauptsächlich die von jQuery implementierte Countdown-Funktion und die Countdown-Funktion zum Senden von Textnachrichten mit. Ich hoffe, dass er jedem helfen kann.

In praktischen Anwendungen wird häufig der Countdown-Effekt genutzt. Der folgende Code verwendet jQuery, um einen Countdown-Timer zu implementieren. 

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title>jquery倒计时实现</title> 
  <style type="text/css"> 
   .shop_list ul li{ 
    display: inline-block; 
    list-style: none; 
    width: 300px; 
   } 
  </style> 
 </head> 
 <body> 
  <p class="shop_list" id="shop_list"> 
   <ul> 
    <li> 
     <img src="img/index/zixun1.jpg"/> 
     <p class="listItem"> 
      <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="img/index/zixun1.jpg"/> 
     <p class="listItem"> 
      <h5>小米手机 Note 顶配版</h5> 
      <p>全网通 香槟金 移动联通<br/>双4G手机 双卡双待</p> 
      <em>￥2998<i>起</i></em> 
      <span class="time" data-starttime=&#39;1445982375&#39; data-endtime=&#39;1446350400&#39;></span> 
     </p> 
    </li> 
   </ul> 
  </p> 
 </body> 
 <script type="text/javascript" src="js/lib/jquery-1.10.1.min.js" ></script> 
 <script type="text/javascript"> 
  $(function(){ 
   //找到商品列表以及时间显示span 
   var abj = $("#shop_list"), 
    timeObj = abj.find(&#39;.time&#39;); 
   //获取开始时间 
   var starttime = timeObj.data(&#39;starttime&#39;); 
    
   // 定时器函数 
   function actionDo(){ 
    return setInterval(function(){ 
     timeObj.each(function(index, el) { 
      //surplusTime为活动剩余开始时间 
      var t = $(this), 
       surplusTime = t.data(&#39;endtime&#39;) -starttime; 
      //若活动剩余开始时间小于0，则说明活动已开始 
      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(""); 
       //设置输出到HTML的格式并输出到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(); 
  }); 
 </script> 
</html>

So implementieren Sie die jQuery-SMS-Countdown-Funktion

1. Wenn Sie auf die Schaltfläche klicken, können Sie den Countdown herunterzählen und anpassen. 2. Beim Empfang Die SMS schlägt fehl, der Countdown stoppt. Sie können auf klicken, um die Textnachricht erneut zu senden. 3. Das angeklickte Element unterstützt allgemeine Tags und Eingabe-Tags. Obwohl es sehr kompliziert erscheint, ist der Implementierungscode tatsächlich sehr einfach. Freunde, die ihn benötigen, können darauf verweisen.

Die wichtigsten implementierten Funktionen sind wie folgt:

1. Wenn Sie auf die Schaltfläche klicken, können Sie den Countdown herunterzählen und anpassen.

2. Wenn der Empfang der Textnachricht fehlschlägt, stoppt der Countdown und Sie können auf klicken, um die Textnachricht erneut zu senden.

3. Das angeklickte Element unterstützt allgemeine Tags und Eingabe-Tags.

HTML-Code: 

<input type="button" class="sameBtn btnCur" value="发送验证码"/>
<p class="sameBtn btnCur2">发送验证码</p>

CSS-Code: 

body{padding:100px;text-align: center;}
.sameBtn{display: inline-block;font-size:12px;cursor:pointer;width:76px;height:25px;line-height: 25px;text-align: center;border:0;background: #3186df;color:#fff;}
.sameBtn.current{background: #b1b1b1;}

JS-Code: 

   
//短信倒计时功能
/**使用方式如下：
 * $(".btnCur").CountDownF({
 *    time:120,
 *     resetWords:&#39;重新发送&#39;, //文字定义
 *    cnSeconds:&#39;s&#39;,//倒计时中显示中文的秒，还是s
 *    clickClass:&#39;current&#39;, //点击后添加的class类
 *    countState:true,
 *    callback:function(){
 *      setTimeout(function(){
 *       //当发送失败后，可以立即清除倒计时与其状态
 *        $(".btnCur").CountDownF(&#39;clearState&#39;);
 *      },3000);
 *    }
 *  });
 *
 * */
;(function($,window,document,undefined){
  var pluginName = &#39;CountDownF&#39;,
  defaluts = {
    time:120,
    resetWords:&#39;重新发送&#39;, //文字定义
    cnSeconds:&#39;s&#39;,//倒计时中显示中文的秒，还是s
    clickClass:&#39;current&#39;, //点击后添加的class类
    countState:true //是否可以倒计时，true可以倒计时，false不能进行倒计时
  }
  function Count(element,options){
    this.element = element;
    this.$element = $(this.element);
    this.state = true;
    this.settings = $.extend({},defaluts,options);
    this.number = this.settings.time;
    this.init();
  }
  Count.prototype = {
    init:function(){
      var self = this;
      self.$element.on(&#39;click&#39;,function(){
        if(self.state && self.settings.countState){
          self.state = false;
          if(self.settings.countState){
            self._count();
          }
          if(self.settings.callback){
            self.settings.callback();
          }
        }
      });
    },
    //倒计时函数
    _count:function(){
      var self = this;
      if(self.number == 0){
        self._clearInit();
      }else{
        if(self.number < 10){
          //如果当前元素是input，使用val赋值
          this.$element.attr(&#39;type&#39;) ? this.$element.val(&#39;0&#39; + self.number + self.settings.cnSeconds) : this.$element.html(&#39;0&#39; + self.number + self.settings.cnSeconds); 
        }else{
          this.$element.attr(&#39;type&#39;) ? this.$element.val(self.number + self.settings.cnSeconds) : this.$element.html(self.number + self.settings.cnSeconds);
        }
        self.number--;
        this.$element.addClass(self.settings.clickClass);
        self.clearCount = setTimeout(function(){
          self._count();
        },1000);
      }
    },
    //修改是否可发送短信验证码倒计时状态
    change:function(state){
      var self = this;
      self.settings.countState = state;
    },
    //置为初始状态
    _clearInit:function(){
      var self = this;
      self.$element.removeClass(self.settings.clickClass);
      self.$element.attr(&#39;type&#39;) ? self.$element.val(self.settings.resetWords) : self.$element.html(self.settings.resetWords);
      clearTimeout(self.clearCount);
      self.number = self.settings.time;
      self.state = true;
    },
    //清除倒计时进行状态
    clearState:function(){
      var self = this;
      self._clearInit();
    }
  };
  $.fn.CountDownF = function(options){
    var args = arguments;
    if(options === undefined || typeof options ===&#39;object&#39; ){
      return this.each(function(){
        if(!$.data(this,&#39;plugin&#39; + pluginName)){
          $.data(this,&#39;plugin&#39; + pluginName,new Count(this,options));
        }
      });
    }
    else if(typeof options === &#39;string&#39; && options !== &#39;init&#39;){
      var returns;
       this.each(function(){
        var data = $.data(this,&#39;plugin&#39; + pluginName);
        if(data instanceof Count && typeof data[options] === &#39;function&#39;){
          returns = data[options].apply(data,Array.prototype.slice.call(args,1));
        }
        if(options === &#39;destory&#39;){
           $.data(this, &#39;plugin&#39; + pluginName, null);
        }
      });
       return returns !== undefined ? returns : this;
    }
    else{
      $.error(&#39;Method&#39; + options + &#39;does not exist on jQuery.CountDownF&#39;);
    }
  }
})(jQuery,window,document);

Aufrufmethode: 

$(function(){
  $(".btnCur").CountDownF({
    time:120,
    countState:true,
    callback:function(){
      setTimeout(function(){
        $(".btnCur").CountDownF(&#39;clearState&#39;);
      },3000);
    }
  });
  $(".btnCur2").CountDownF({
    time:50,
    countState:true,
    cnSeconds:&#39;秒&#39;,
    callback:function(){
      setTimeout(function(){
        $(".btnCur2").CountDownF(&#39;clearState&#39;);
      },5000);
    }
  });
})

Verwandte Empfehlungen:

Methode zur Implementierung des SMS-Countdowns von 60 Sekunden

js Anti-Refresh-Countdown-Code js Countdown-Code

So implementieren Sie den jQuery-Seiten-Countdown und den Aktualisierungseffekt

Das obige ist der detaillierte Inhalt vonjQuery-Implementierungscode für Countdown- und SMS-Countdown-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css html JS input
Stellungnahme：
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
Vorheriger Artikel：ES6 async+await synchrone/asynchrone LösungNächster Artikel：ES6 async+await synchrone/asynchrone Lösung

In Verbindung stehende Artikel

Mehr sehen