原生JS實(shí)現(xiàn)隨機(jī)點(diǎn)名項(xiàng)目的實(shí)例代碼

更新時(shí)間：2019年04月30日 16:33:51 作者：小方哥·

這篇文章主要介紹了原生JS實(shí)現(xiàn)隨機(jī)點(diǎn)名項(xiàng)目的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

核心思想

•隨機(jī)產(chǎn)生規(guī)定范圍內(nèi)的整數(shù)，然后再產(chǎn)生相同范圍內(nèi)的整數(shù)，兩者相同時(shí)，則暫停。

所用知識(shí)

•Math.random() * num: 產(chǎn)生從0到num的隨機(jī)數(shù)
•Math.floor(): 向下取整
•簡單的DOM操作等

技術(shù)擴(kuò)展

•擴(kuò)展人數(shù)
•添加停止鍵等

效果

代碼如下

•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">隨機(jī)選一個(gè)</button></li>
    <li><button type="button">隨機(jī)選兩個(gè)</button></li>
    <li><button type="button">隨機(jī)選三個(gè)</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);

總結(jié)

以上所述是小編給大家介紹的原生JS實(shí)現(xiàn)隨機(jī)點(diǎn)名項(xiàng)目的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: