Q: 網路上已經很多可以用的隨機選擇器了耶...
A: 拉霸的用途很多，看你怎麼用囉～

已經連續Ｎ篇Loading，本篇跳過Loading篇章，腦袋要來點新東西，今天做個拉霸～掌握好拉霸技巧，無法決定要吃什麼的時候、決定倒霉鬼是誰的時候，就靠它吧！

樣式要先出來囉～

首先，切版及樣式是最重要的！以.result給定容器的高度，內部的.result-txt設定背景色，再以.result-item包著每個結果，最重要的就是要對.result下overflow: hidden，這時候所有我們要的元素都有了！

<style>
  .results {
    width: 60px;
    color: #fff;
  }
  .result {
    height: 70px;
    border-radius: 4px;
    border: 2px solid gray;
    overflow: hidden;
  }
  .result-txt {
    background: linear-gradient(LightCoral, Gold, LightSkyBlue, LightCoral);
  }
  .result-item {
    font-size: 48px;
    display: flex;
    justify-content: center;
    line-height: 70px;
  }
  .btn-start,
  .btn-stop {
    text-align: center;
    margin: 20px 0;
    line-height: 30px;
    border-radius: 4px;
    background: linear-gradient(DarkGray, DimGray);
    cursor: pointer;
  }
  .btn-start:hover,
  .btn-stop:hover {
    transform: scale(1.05);
  }
</style>
  
<div class="results">
  <div class="btn-start" onclick="startAnimation()">Start</div>
  <div class="result">
    <div class="result-txt is-play" id="result">
      <div class="result-item">1</div>
      <div class="result-item">2</div>
      <div class="result-item">3</div>
      <div class="result-item">4</div>
      <div class="result-item">5</div>
      <div class="result-item">6</div>
      <div class="result-item">7</div>
      <div class="result-item">8</div>
      <div class="result-item">9</div>
      <div class="result-item">10</div>
    </div>
  </div>
  <div class="btn-stop" onclick="stopAnimation()">Stop</div>
</div> 

再來就是要讓拉霸會動

下面第一張圖可以看到其實內部的.result-item並沒有隱藏掉，只是因為外層的.result設置height: 70px並下了overflow: hidden，所以超出容器的的元素都看不見，這時候要讓拉霸跑起來，就可以針對.result-txt做位移。

<style>
  .is-play.result-txt {
    animation: resultPlay 1s infinite linear;
  }

  @keyframes resultPlay {
    100% {
      transform: translateY(-90%)
    }
  }
</style>

為什麼這裏的translateY不是設置-100%呢？為什麼是負的呢？

• 如果是-100%的話，那麼就會超出整個元素，這樣跑起來就會幾個瞬間是空白的。
• 如果要將元素向上位移，則 Y 軸要設置負的，Y 軸正的位移會讓元素往下掉。

最後可以來點js的輔助完成隨機選擇

當觸發startAnimation()方法的時候，會去document尋找id為result的元素，如果有找到元素，則對元素新增.is-play，並且將元素上的transform屬性設置為none，這時候拉霸就會開始跑了！

<script>
  function startAnimation() {
    if (document.getElementById(`result`)) {
      document.getElementById(`result`).classList.add('is-play');
      document.getElementById(`result`).style.transform = 'none';
    }
  }
</script>

第二段就是隨機比較重要的部分了，跟startAnimation()一樣先尋找id為result的元素，然後以Math.random取得隨機數(0 <= item < 1)乘以10後以Math.floor無條件捨去小數位，就會得到 0 - 9 任一隨機數字，接著對元素設定style，拉霸就完成了！

<script>
  function stopAnimation() {
    if (document.getElementById(`result`)) {
      const num = Math.floor(Math.random() * 10);
      document.getElementById(`result`).classList.remove('is-play');
      document.getElementById(`result`).style.transform = `translateY(${-num * 10}%)`;
    }
  }
</script>

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！