js随机点名系统 – 源码巴士

运行效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  td {
    width: 100px;
    height: 100px;
    text-align: center;
  }

  .tdg {
    background-color: #F00C30;
    color: #f00c30;
  }

  .tdk {
    color: #f00c30;
  }

  .tdsj {
    background-color: #ffffff;
    color: #ffffff;
  }
  </style>
</head>
<body>
<table border="1" align="center">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<p align="center">
  <input type="button" value="随机抽取" id="show">
  <input type="button" value="打乱排序" id="random">
  <br>
  <input type="button" value="快速抽取" id="select">
  <input type="button" value="停止抽取" id="stop">
</p>
<script type="text/javascript">

Array.prototype.contains = function (obj) {
  var i = this.length;
  while (i--) {
    if (this[i] === obj) {
      return true;
    }
  }
  return false;
};
var students = ["周元康", "刘婷婷", "彭丹", "凌红伟", "吕雷", "曾靖", "张艳", "符幸", "邓蔚", "龙英杰", "李文星", "周建鹏", "何礼波", "李交胜", "刘芳", "张三"];

function myRandom() {
  var sz = [];//用来装随机下标
  while (sz.length != students.length) {
    var index = parseInt(Math.random() * students.length);
    if (!sz.contains(index)) {//判断下标是否存在
      sz.push(index);
    }
  }
  var tds = document.getElementsByTagName('td');
  for (var i = 0; i < tds.length; i++) {
    tds[i].innerHTML = students[sz[i]];
    tds[i].setAttribute('class', "tdg");
    tds[i].οnclick = function () {
      this.setAttribute('class', "tdk");
    }
  }
}

myRandom();

function myShow() {
  var index = parseInt(Math.random() * students.length);
  var tds = document.getElementsByTagName('td');
  if (tds[index].getAttribute('class') == 'tdk') {
    myShow();
  }
  tds[index].setAttribute('class', "tdk");
}

var b;

function mySelect() {
  var a = -1;
  var tds = document.getElementsByTagName('td');
  if (b == undefined) {
    b = setInterval(function () {
      for (var i = 0; i < students.length; i++) {
        var className = tds[i].getAttribute('class');
        if (className != 'tdk') {
          tds[i].setAttribute('class', "tdg");
        }
      }
      a++;
      if (tds[a % students.length].getAttribute('class') != 'tdk') {
        tds[a % students.length].setAttribute("class", "tdsj");
      }

    }, 30);
  }
}

function myStop() {
  window.clearInterval(b);
  b = undefined;
  var tds = document.getElementsByTagName('td');
  for (var i = 0; i < tds.length; i++) {
    var className = tds[i].getAttribute('class');
    if (className == 'tdsj') {
      tds[i].setAttribute('class', "tdk");
    }
  }
}

document.getElementById('show').onclick = myShow;
document.getElementById('random').onclick = myRandom;
document.getElementById('select').onclick = mySelect;
document.getElementById('stop').onclick = myStop;

</script>
</body>
</html>
原文链接：https://blog.csdn.net/qq_39998026/article/details/78361166