用JS实现随机点名小案例

最新推荐文章于 2023-08-04 11:46:29 发布

weixin_34326558

最新推荐文章于 2023-08-04 11:46:29 发布

阅读量356

点赞数

原文链接：https://juejin.im/post/5c5fa60851882562973c1482

版权

练习时写的随机点名整理一下

<!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>
复制代码

weixin_34326558

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用JS实现随机点名小案例

练习时写的随机点名整理一下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
复制链接

扫一扫