原生JS实现随机点名项目

核心思想

• 随机产生规定范围内的整数，然后再产生相同范围内的整数，两者相同时，则暂停。

所用知识

• Math.random() * num: 产生从0到num的随机数
• Math.floor(): 向下取整
• 简单的DOM操作等

技术扩展

• 扩展人数
• 添加停止键等

效果

代码如下

• html:

• <div class="container">
          <section class="demo">
              <ul>
                  <li></li>
                  <li></li>
                  <li></li>
              </ul>
          </section>
          <section class="students"><ul></ul></section>
          <section class="buttonList">
              <ul>
                  <li><button type="button">随机选一个</button></li>
                  <li><button type="button">随机选两个</button></li>
                  <li><button type="button">随机选三个</button></li>
              </ul>
          </section>
      </div>

  <style type="text/css">
          * {
              margin: 0;
              padding: 0;
          }
          ul {
              list-style: none;
          }
          body {
              width: 100%;
              height: 100%;
              background: url("images/bg.jpg") no-repeat;
              background-size: cover;
          }
          button {
              border: none;
              background-color: transparent;
              color: #fff;
              font-size: 20px;
          }
          .container {
              width: 1200px;
              height: 700px;
              margin: 10px auto;
          }
          .container .demo, .container .buttonList {
              width: inherit;
              height: 25%;
          }
          .container .students {
              width: inherit;
              height: 50%;
          }
          .container .students li {
              margin-right: 50px;
              margin-bottom: 30px;
              text-align: center;
              border-radius: 10px;
              font-size: 20px;
              font-weight: bold;
          }
          .container .students li:nth-child(5n) {
              margin-right: 0;
          }
          .container .buttonList li button {
              float: left;
              width: 200px;
              height: 60px;
              background-color: #4caf5085;
              margin-right: 150px;
              text-align: center;
              line-height: 60px;
              border-radius: 10px;
              margin-top: 50px;
              font-weight: bold;
          }
          .container .buttonList li button:hover {
              background-color: #4caf50;
          }
          .container .buttonList li:nth-child(1) {
              margin-left: 150px;
          }
          .container .demo li {
              width: 200px;
              height: 150px;
              background-color: #4caf5085;
              float: left;
              margin-right: 150px;
              border-radius: 50%;
              margin-top: 10px;
              line-height: 150px;
              font-weight: bold;
              color: #fff;
              font-size: 60px;
              text-align: center;
          }
          .container .demo li:first-child {
              margin-left: 150px;
          }
      </style>

  <script type="text/javascript">
          var stuArray = ["小方", "小田", "小明", "小红", "小吕", "小于", "小美", "小绿", "李华", "小李", "小胡",
              "小夏", "小徐", "小小", "小吴", "小陈", "小狗", "小许", "小熊", "小新"];
          var stuList = document.querySelector(".students").querySelector("ul");
          var buttonList = document.querySelectorAll("button");
          var demoList = document.querySelector(".demo").querySelectorAll("li");
          
  
          for (var i = 0; i < stuArray.length; i++) {
              var li = document.createElement("li");
              stuList.appendChild(li);
              li.innerHTML = stuArray[i];
              li.style.cssFloat = "left";
              li.style.width = 200 + "px";
              li.style.height = 60 + "px";
              li.style.backgroundColor = "#4caf5085";
              li.style.color = "#fff";
              li.style.lineHeight = 60 + "px";
          }
  
          var stuArrayList = stuList.querySelectorAll("li");
  
          function chooseOne () {
              for (var i = 0; i < stuArrayList.length; i++) {
                  stuArrayList[i].style.background = "#4caf5085";
              }
              for (var i = 0; i < demoList.length; i++) {
                  demoList[i].innerHTML = "";
              }
              var interId = setInterval(function () {
                  var x = Math.floor(Math.random() * stuArray.length);
                  stuArrayList[x].style.backgroundColor = "green";
                  demoList[1].innerHTML = stuArrayList[x].innerHTML;
                  var timeId = setTimeout(function () {
                      stuArrayList[x].style.backgroundColor = "#4caf5085";
                  }, 100);
                  var y = Math.floor(Math.random() * stuArray.length);
                  if (y == x) {
                      clearTimeout(timeId);
                      clearInterval(interId);
                      stuArrayList[y].style.backgroundColor = "green";
                  }
              }, 100);
          }
  
          function chooseTwo () {
              for (var i = 0; i < stuArrayList.length; i++) {
                  stuArrayList[i].style.background = "#4caf5085";
              }
              for (var i = 0; i < demoList.length; i++) {
                  demoList[i].innerHTML = "";
              }
              var interId = setInterval(function () {
                  do {
                      var x1 = Math.floor(Math.random() * stuArray.length);
                      var x2 = Math.floor(Math.random() * stuArray.length);
                  } while (x1 == x2);
                  stuArrayList[x1].style.backgroundColor = "green";
                  stuArrayList[x2].style.backgroundColor = "green";
                  demoList[0].innerHTML = stuArrayList[x1].innerHTML;
                  demoList[2].innerHTML = stuArrayList[x2].innerHTML;
                  var timeId = setTimeout(function () {
                      stuArrayList[x1].style.backgroundColor = "#4caf5085";
                      stuArrayList[x2].style.backgroundColor = "#4caf5085";
                  }, 100);
                  var y1 = Math.floor(Math.random() * stuArray.length);
                  var y2 = Math.floor(Math.random() * stuArray.length);
                  if ((y1 == x1 && y2 == x2) || (y1 == x2 && y2 == x1)) {
                      clearTimeout(timeId);
                      clearInterval(interId);
                      stuArrayList[x1].style.backgroundColor = "green";
                      stuArrayList[x2].style.backgroundColor = "green";
                  }
              }, 100);
          }
  
          function chooseThree () {
              for (var i = 0; i < stuArrayList.length; i++) {
                  stuArrayList[i].style.background = "#4caf5085";
              }
              for (var i = 0; i < demoList.length; i++) {
                  demoList[i].innerHTML = "";
              }
              var interId = setInterval(function () {
                  do {
                      var x1 = Math.floor(Math.random() * stuArray.length);
                      var x2 = Math.floor(Math.random() * stuArray.length);
                      var x3 = Math.floor(Math.random() * stuArray.length);
                  } while (x1 == x2 || x2 == x3 || x1 == x3);
                  stuArrayList[x1].style.backgroundColor = "green";
                  stuArrayList[x2].style.backgroundColor = "green";
                  stuArrayList[x3].style.backgroundColor = "green";
                  demoList[0].innerHTML = stuArrayList[x1].innerHTML;
                  demoList[1].innerHTML = stuArrayList[x2].innerHTML;
                  demoList[2].innerHTML = stuArrayList[x3].innerHTML;
                  var timeId = setTimeout(function () {
                      stuArrayList[x1].style.backgroundColor = "#4caf5085";
                      stuArrayList[x2].style.backgroundColor = "#4caf5085";
                      stuArrayList[x3].style.backgroundColor = "#4caf5085";
                  }, 100);
                  var y1 = Math.floor(Math.random() * stuArray.length);
                  var y2 = Math.floor(Math.random() * stuArray.length);
                  var y3 = Math.floor(Math.random() * stuArray.length);
                  if ((x1 == y1 && x2 == y2) || (x1 == y2 && x2 == y1)) {
                      clearTimeout(timeId);
                      clearInterval(interId);
                      stuArrayList[x1].style.backgroundColor = "green";
                      stuArrayList[x2].style.backgroundColor = "green";
                      stuArrayList[x3].style.backgroundColor = "green";
                  }
              }, 100);
          }
  
          buttonList[0].addEventListener("click", function () {chooseOne()}, false);
          buttonList[1].addEventListener("click", function () {chooseTwo()}, false);
          buttonList[2].addEventListener("click", function () {chooseThree()}, false);