slotアプリのJavaScriptコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SLOT</title>
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <h1>SLOT</h1>
    </header>

    <div class="wrapper">
      <p id="slot-number"></p>
    
      <p id="slot-number-two"></p>
    
      <p id="slot-number-three"></p>
    
      <button id='slot-start' onclick='startSlot()'>START</button>
      <button id='slot-stop' onclick='stopSlot()'>STOP</button>
    
      <button id='slot-start-two' onclick='startSlotTwo()'>START</button>
      <button id='slot-stop-two' onclick='stopSlotTwo()'>STOP</button>
      
      <button id='slot-start-three' onclick='startSlotThree()'>START</button>
      <button id='slot-stop-three' onclick='stopSlotThree()'>STOP</button>
    </div>
    <script src="slot.js"></script>
  </body>
</html>
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let interval;

function startSlot() {
  const slotNumber = document.getElementById('slot-number');
  interval = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlot() {
  clearInterval(interval);
}

let intervalTwo;

function startSlotTwo() {
  const slotNumber = document.getElementById('slot-number-two');
  intervalTwo = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlotTwo() {
  clearInterval(intervalTwo);
}

let intervalThree;

function startSlotThree() {
  const slotNumber = document.getElementById('slot-number-three');
  intervalThree = setInterval(function() {
    slotNumber.innerHTML = array[Math.floor(Math.random() * array.length)];
  }, 10);
}

function stopSlotThree() {
  clearInterval(intervalThree);
}

slotアプリのHTMLとJavaScriptのコードはこのようになっています。

index.htmlでは</body>の直前でslot.jsを読み込んでいます。また、<button>のonclick属性ではslot.jsで定義された関数(startSlot()やstopSlot())が指定されていることがわかります。

次回からはslot.jsのコードを見ながら、JavaScriptの文法を解説します。

コメント

タイトルとURLをコピーしました