温馨提示×

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

发布时间:2021-03-11 17:06:11 阅读:128 作者:Leah 栏目:web开发

使用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">
  * {
   margin0;
   padding0;
  }
  ul {
   list-style: none;
  }
  body {
   width100%;
   height100%;
   backgroundurl("images/bg.jpg") no-repeat;
   background-size: cover;
  }
  button {
   border: none;
   background-color: transparent;
   color#fff;
   font-size20px;
  }
  .container {
   width1200px;
   height700px;
   margin10px auto;
  }
  .container .demo.container .buttonList {
   width: inherit;
   height25%;
  }
  .container .students {
   width: inherit;
   height50%;
  }
  .container .students li {
   margin-right50px;
   margin-bottom30px;
   text-align: center;
   border-radius10px;
   font-size20px;
   font-weight: bold;
  }
  .container .students li:nth-child(5n) {
   margin-right0;
  }
  .container .buttonList li button {
   float: left;
   width200px;
   height60px;
   background-color#4caf5085;
   margin-right150px;
   text-align: center;
   line-height60px;
   border-radius10px;
   margin-top50px;
   font-weight: bold;
  }
  .container .buttonList li button:hover {
   background-color#4caf50;
  }
  .container .buttonList li:nth-child(1) {
   margin-left150px;
  }
  .container .demo li {
   width200px;
   height150px;
   background-color#4caf5085;
   float: left;
   margin-right150px;
   border-radius50%;
   margin-top10px;
   line-height150px;
   font-weight: bold;
   color#fff;
   font-size60px;
   text-align: center;
  }
  .container .demo li:first-child {
   margin-left150px;
  }
 </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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

温馨提示×

网络异常,请检查网络