使用JavaScript怎么实现一个随机点名功能

使用JavaScript怎么实现一个随机点名功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

•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>

•css:

 <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>

•javascript:

<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);

关于使用JavaScript怎么实现一个随机点名功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。