コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

カウントダウンおよび SMS カウントダウン関数を実装するための jQuery の実装コード

小云云
リリース： 2018-02-05 14:24:22
オリジナル
1759 人が閲覧しました

この記事では、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 SMS カウントダウン機能の実装方法

1. ボタンをクリックすると、カウントダウンし、カウントダウンをカスタマイズできます。 2. SMS の受信に失敗した場合、カウントダウンが停止し、クリックして SMS を再送信できます。 3. 「要素は一般タグと入力タグをサポートします」をクリックします。非常に複雑に見えますが、実装コードは実際には非常に単純です。必要な方は参考にしてください。

実装されている主な機能は次のとおりです:

1. ボタンをクリックすると、カウントダウンし、カウントダウンをカスタマイズできます。

2. テキスト メッセージの受信に失敗すると、カウントダウンが停止し、クリックしてテキスト メッセージを再送信できます。

3. クリックされた要素は、一般タグと入力タグをサポートします。

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);
    }
  });
})
ログイン後にコピー

関連する推奨事項:

SMS カウントダウンの実装60 年代メソッド

js ディフェンスを更新しましたカウントダウン コード js カウントダウン コード

jQuery ページのカウントダウンと更新効果を実装する方法

以上がカウントダウンおよび SMS カウントダウン関数を実装するための jQuery の実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
jquery 秒読み ショートメッセージ
ソース：php.cn
前の記事：ES6 非同期 + 待機同期/非同期ソリューション 次の記事：jqueryカウントダウンアプレット実装コード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート