189 8069 5689

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

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

成都创新互联公司致力于网站建设、网站设计,成都网站设计,集团网站建设等服务标准化,推过标准化降低中小企业的建站的成本,并持续提升建站的定制化服务水平进行质量交付,让企业网站从市场竞争中脱颖而出。 选择成都创新互联公司,就选择了安全、稳定、美观的网站建设服务!

•html:

 
  
   
        
  •     
  •     
  •    
     
          
          
    • 随机选一个
    •     
    • 随机选两个
    •     
    • 随机选三个
    •    
        

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

    •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怎么实现一个随机点名功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


    网页名称:使用JavaScript怎么实现一个随机点名功能
    文章地址:http://cdxtjz.cn/article/iiiids.html

    其他资讯