Javascript3つの文字をスロットで止める

2023-07-28

<style>
  .outline {
    text-align:center;
  }
  .roulette {
    display: inline-block;
    border:1px solid #000000;
    font-size:30px;
    width:200px;
margin-bottom:20px;
  }
</style>
<script>
  var roulette;
  
  // ルーレットを開始
  function start() {
    roulette = setInterval(function() {
      // 1〜3の範囲でランダムな数値を作成
      var idx = Math.floor( Math.random() * 3 ) + 1;
      var text;
      
      // テキストを設定
      switch (idx) {
        case 1:
          text = "大吉";
          break;
        case 2:
          text = "中吉";
          break;
        case 3:
          text = "笑吉";
          break;
      }
      
      // ルーレット
      document.getElementById("roulette").innerHTML = text;
    }, 100);
  }
 
  // ルーレットを停止
  function stop() {
    if(roulette) {
      clearInterval(roulette);
    }
  }
</script>
  <div class="outline">
    <div class="roulette" id="roulette">今日の運勢</div>
    <br />
    <input type="button" value="スタート" id="start" onclick="start();"/>
    <input type="button" value="ストップ" id="stop" onclick="stop();"/>
  </div>