用JS實現隨機點名小案例

一宅發表於2019-02-10
JS隨機

練習時寫的隨機點名整理一下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: black;
    }

    .content {
      width: 600px;
      height: 400px;
      background: #eee;
      margin: 100px auto;
      text-align: center;
      position: relative;
      line-height: 300px;
      color: #000;
      font-size: 70px;
    }

    .btn1 {
      background: #ccc;
      width: 180px;
      height: 80px;
      font-size: 30px;
      color: #ff4400;
      border-radius: 12px;
      position: absolute;
      bottom: 30px;
      left: 50%;
      margin-left: -90px;

    }
  </style>
</head>

<body>
  <div class="content" id="content">
    <span id="span1">
      點選開始
    </span>
    <button class="btn1" id="btn1">
      開始
    </button>

  </div>

  <script>
    // 把點名的名字新增到陣列中
    var arr = ['中國', '英國', '德國', '美國', '義大利', '法國', '於xx', '西班牙', '日本', '阿聯酋', '荷蘭', '葡萄牙', '匈牙利', '加拿大', '馬來西亞', '泰國',
      '越南', '俄羅斯'
    ];
    // 獲取按鈕
    var btn1 = document.getElementById('btn1');
    var content = document.getElementById('content');
    var span1 = document.getElementById('span1');
    var timer; //宣告計時器
    var testNum = true;
    // 給btn1新增點選事件
    btn1.onclick = function () {
      if (testNum) {
        start();
        btn1.innerHTML = '結束';
        testNum = false;
      } else {
        stop();
        btn1.innerHTML = '開始';
        testNum = true;
      }
    }

    function right() {
      if (span1.innerHTML == "於xx") {
        alert('恭喜你獲得於xx限量簽名一張');
      }
    }

    function start() {
      // 設定定時器
      timer = setInterval(function () {
        var num = random(0, arr.length - 1);
        span1.innerHTML = arr[num];
      }, 50);
    }

    function stop() {
      // 清除定時器
      clearInterval(timer);
      right();
    }
    // 隨機函式
    function random(a, b) {
      var randomNum = Math.round(Math.random() * (b - a) + a);
      return randomNum;
    }
  </script>
</body>

</html>
複製程式碼

相關文章