第29車廂-倒數一篇！人人有獎～抽獎抽起來了各位！

2021 iThome 鐵人賽

DAY 29

Modern Web

快搭上姐姐的`微`前端便車系列第 29 篇

13th鐵人賽 javascript jquery 網頁教學

切版姐姐

2021-10-14 23:50:23

1601 瀏覽

本篇分享自製一個簡易抽獎程式碼啦！---以JQ為例

▼完成圖如下

為了讓大家比較好懂，程式碼用這張圖解釋

附上程式碼

https://codepen.io/shellyPen/pen/mdMeMNM?editors=1011
來玩看看會抽到什麼呢?

引用

會用到bootstrap4格線，以及Modal(視窗)
所以要套用bootstrap4的CSS及JS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" ></script>

HTML

結構可從上圖看，下面會先放一個官方modal模型

<div class="container p-5">
  <div class="row row-cols-3 ">
   <div class="col p-3"><div id="item1" class="box p-3 h-100">餘數為1 , id名稱為item1</div></div>
   <div class="col p-3"><div id="item2" class="box p-3 h-100">餘數為2 , id名稱為item2</div></div>
   <div class="col p-3"><div id="item3" class="box p-3 h-100">餘數為3 , id名稱為item3</div></div>

   <div class="col p-3"><div id="item0" class="box p-3 h-100">餘數為0 , id名稱為item0</div></div>
   <div class="col p-3"><div class="p-3 h-100"><input type="button" id="btnstart" value="點我抽獎" class="w-100 h-100"></div></div>
   <div class="col p-3"><div id="item4" class="box p-3 h-100">餘數為4 , id名稱為item4</div></div>


   <div class="col p-3"><div id="item7" class="box p-3 h-100">餘數為7 , id名稱為item7</div></div>
   <div class="col p-3"><div id="item6" class="box p-3 h-100">餘數為6 , id名稱為item6</div></div>
   <div class="col p-3"><div id="item5" class="box p-3 h-100">餘數為5 , id名稱為item5</div></div>
   
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">恭喜獲得</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>

    </div>
  </div>
</div>

CSS

box為宮格的黃色，會先預先寫好.activeclass，是用來run到那格的時候變色還有移動的

    body{
      background-image: url("https://images.996pic.com/0cf060ad9fd640a1a3873bb99bf220f9.jpg");
      background-repeat: no-repeat;
      background-size:cover;
    }
      .col{
          height:25vh;
          font-size: 24px;
      }

      .box{
        background-color: #f1c40f;
        box-shadow: 0px 10px 0px 0px #D8AB00;
        border-radius: 10px;
        display: flex;
        justify-content: center;
      }

      .box.active {
        transform: translate(0px, 5px);
        box-shadow: 0px 1px 0px 0px;
        background-color: #FFDE29;
        opacity: 0.5;
      }

      #btnstart{
        background-color: #2ecc71;
        box-shadow: 0px 20px 0px 0px #15B358;
        border: none;
        border-radius: 50%;
      }

      #btnstart:active {
        background-color: #48E68B;
        transform: translate(0px, 5px);
        box-shadow: 0px 1px 0px 0px;
       }

var timeoutID ;
var runID;
var num ;

$(function() {
    //按了抽獎 跑time
    $("#btnstart").click(function(){
      init();  
    })

    //當我們按訊息視窗X時，隱藏後要將每宮格的亮色拿掉(就是active這個className)
    $('#exampleModal').on('hidden.bs.modal', function (event) {
      // do something...
      $(".box").removeClass("active");
    })

});


function init(){   
  num = 1; //要從哪裡開始跑

  runID = Math.floor(Math.random()*20)+1;   //設一個1~20 隨機數字 是要停止的數字
  console.log(runID);
 
  $(".box").removeClass("active"); //先清空大家的亮色
  $('.modal-body').html(""); //先清空視窗modal內容
  
  timeoutID = setInterval(run, 200);  //每幾秒跑一次run function
  
  $("#btnstart").attr('disabled', true); //在按了"點我抽獎" 按鈕要禁用，以免重複run function

}



function run(){

  // 1)把前一格正常化
  // 2)把目前這一格亮化
  // 3)如果已跑完應該跑的次數，就停止，show該內容
  
  var ID = num % 8; 
  console.log("餘數"+ ID);
  $('#item'+ID).addClass("active");
  $('.box').not('#item'+ID).removeClass("active");
  
  
    if( num == runID){
        clearInterval(timeoutID); // 如果
          var content;
              switch (ID) {
              case 0:
              　　content=`<div>玩「椪糖」遊戲一次！<img class="w-100" src="https://cdn.hk01.com/di/media/images/dw/20210925/518255298360643584978301.jpeg/y7LRW9rTLwavFpAHWuuMSaVb6SsYniLprky3sa5Mt7E?v=w1920"></div>`;
              　break;
              case 1:
              　　content=`<div>爽照一張<img class="w-100" src="https://memeprod.sgp1.digitaloceanspaces.com/user-wtf/1584446416897.jpg"></div>`;
              　break;
              case 2:
              　　content=`<p>愛瘋13 .....照一張</p><img  class="w-100" src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-13-og-2021?wid=1200&hei=630&fmt=jpeg&qlt=95&.v=1630076508000" alt="">`;
              　break;
              case 4:
              　　content=`<div>紅包一疊，但不要找我拿<img class="w-100" src="https://attach.setn.com/newsimages/2018/02/16/1252786-PH.jpg"></div>`;
              　break;
              default:
                　　content=`<div><img class="w-100" src="https://www.moedict.tw/%E6%87%B2%E7%BD%B0.png">罰你要按讚姐姐文章一次</div>`;
              }
  
            $('.modal-body').html(content);//寫入視窗內容
            $('#exampleModal').modal('show');//視窗出現 bootstrap4原本方法
            $("#btnstart").attr('disabled', false);//剛剛"點我抽獎" 按鈕要禁用，要恢復可以按


          } else{
            num ++ ;
          }
  
  }

範例觀念

如何使用 jQuery 來啟用/停用元素？
要讓 disabled 屬性能啟用的話，它的值就需要為 true 才行
$('selector').attr('disabled', true); // 啟用停用 = 就是按鈕不可以按
$('selector').attr('disabled', false); // 取消停用 = 就是按鈕可以按
詳細可參考 https://abgne.tw/jquery/jquery-tips/jquery-enabled-or-disabled-element.html

本篇參考文章: