iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

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

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

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

▼完成圖如下

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

附上程式碼

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

https://ithelp.ithome.com.tw/upload/images/20211014/20142016RwKZWoXvqR.png

引用

  • 會用到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;
       }

JQ

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 ++ ;
          }
  
  }

範例觀念

本篇參考文章:


上一篇
第28車廂-vw很好用我知道!但不小心就踩雷捏!
下一篇
第30車廂-各位乘客們,我們到站啦!
系列文
快搭上姐姐的`微`前端便車30

1 則留言

0
Siqing47
iT邦新手 5 級 ‧ 2021-10-15 15:58:17

恭喜抽中哀鳳13...照片一張 XDDD

/images/emoticon/emoticon01.gif

我要留言

立即登入留言