• コミュニティ

  20分で押せなくなるボタンを設置したい

  トピックス by widget初心者 1792 pt  2023年9月15日 11:44 303 PV

  【作成したいこと】

  添付画像のように20分で押せなくなるボタンは実装可能でしょうか？

  【参考画像】

  https://drive.google.com/file/d/1u_71fDXs4AgPTfahVoyjyVi-XUY60TYD/view
  

  
  

  【参考ページ】

  https://vape-spade.com/lp?u=line-1_b&sb_tracking=true&utm_creative=0727_nr_40-50_1&sb_article_uid=nkDOmyvSebTsgEREfsiKg&squadbeyond_uid=599ddd52-d0d8-4bf2-8c13-61dff56b877b
  

  widgetマスター   7 月, 3 数週間前 2 人 · 1 コメント

  • widget
  • サイトを開いたらカウントダウン開始※要javascript
  • ボタン
• 1 コメント

• 

  widgetマスター

  モデレータ

  2023年9月15日 13:40

  20分で押せなくなるボタンを実装する例をご紹介いたします。

  1. Widget 「サイトを開いたらカウントダウン開始※要javascript」を設置

  2. 上記設置した Widget のJavaScriptを編集

  下記 _.init = function() { … } 内に下記コードを追加してください。

  _.init = function() {
      _.timer = [];
      let endTime = [];
      let endMinutes = 1;
      let endComment = '終了しました'
      endTime[0] = new Date().setMinutes(new Date().getMinutes() + endMinutes);
      _.timer[0] = new _.CountdownTimer(document.querySelector('.js-countdown-class-00'), endTime[0], {
          callback: function() {
              document.querySelector('.js-countdown-class-00 .end-text').innerHTML = endComment;
              document.querySelector('.js-countdown-class-00').classList.add('is-end');
              // ★ 追加ここから ↓↓
              if (document.querySelector('.end-btn')) {
                  document.querySelector('.end-btn').classList.add('is-disabled');
              }
              // ★ 追加ここまで ↑↑
          }
      });
  };

  3. 設置しているボタンに クラス名を追加

  時間制限をつけたいボタンにクラス名class=”end-btn”を追加します。

  詳細：https://squadbeyond.gyazo.com/b2a5d4e1c9cd2e418686c52f09e489d3

  <div class="button-box">
   　<a href="ooooo" class="end=btn" draggable="false">
      <div class="button style button-color-green"><span class="copy">お得なキャンペーン</span><span class="title">公式ページを見てみる</span></div>
  </div>
  

  4. 追加したクラスに ボタンを無効にするためのCSSを適応

  詳細：https://squadbeyond.gyazo.com/2095f1a9a026ff4b2c3a2e8f03efe33c

  .button-box a.is-disabled {
    pointer-events: none; //マウスカーソルのイベント（aタグのリンク）を無効にする
    filter: grayscale(1); //ボタンにグレーのフィルターを適応 ※グレーにしたくない場合は削除して下さい
  }
  .button-box a.is-disabled .style::before {
    animation: unset; //動く矢印を止める ※動かしたままで良い場合は削除して下さい
  }

  下記設置例：

  https://sb-draft-preview.squadbeyond.com/articles/xknDzWLnFIQohjGfyqw/draft?token=b43b0c24031b36db9bba37c97fd999c8

  ※ 設置例はタイマーを 1分 に設定しています

Log In to Reply