使用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怎么实现一个随机点名功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
