cari

Rumah >hujung hadapan web >tutorial js >jQuery实现倒计时及短信倒计时功能的实现代码

jQuery实现倒计时及短信倒计时功能的实现代码

小云云
小云云asal
2018-02-05 14:24:221807semak imbas

本文主要和大家分享jQuery实现倒计时功能以及jQuery实现发送短信倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

在实际运用中，经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。

<!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>

jQuery短信倒计时功能的实现方法

1.点击按钮的时候，可以进行倒计时，倒计时自定义.2.当接收短信失败后，倒计时停止，可点击重新发送短信.3.点击的元素支持一般标签和input标签。看似很复杂其实实现代码很简单，下面小编给大家分享下实现代码，需要的朋友参考下吧。

实现的主要功能如下：

1.点击按钮的时候，可以进行倒计时，倒计时自定义。

2.当接收短信失败后，倒计时停止，可点击重新发送短信。

3.点击的元素支持一般标签和input标签。

html代码：

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

   

css代码：

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代码：

   
//短信倒计时功能
/**使用方式如下：
 * $(".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);

   

调用方式：

$(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);
    }
  });
})

相关推荐：

实现短信倒计时60s的方法

js防刷新的倒计时代码 js倒计时代码

jQuery页面倒计时并刷新效果的实现方法

Atas ialah kandungan terperinci jQuery实现倒计时及短信倒计时功能的实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery css html JS input
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：ES6之async+await 同步/异步方案Artikel seterusnya：jquery倒计时小应用实现代码

Artikel berkaitan

Lihat lagi