原生JS实现随机点名项目的实例代码

站长资源 2024/11/16 佚名

19 1538 19

相思资源网 Design By www.200059.com

核心思想

"color: #ff0000">所用知识

"color: #ff0000">技术扩展

"text-align: center">

代码如下

"htmlcode">

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

"htmlcode">

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

"htmlcode">

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

总结

以上所述是小编给大家介绍的原生JS实现随机点名项目的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

js,随机点名,js,点名,js随机

标签：

js,随机点名,js,点名,js随机

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“原生JS实现随机点名项目的实例代码”

暂无原生JS实现随机点名项目的实例代码的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

原生JS实现随机点名项目的实例代码

js,随机点名,js,点名,js随机

Vue基本使用之对象提供的属性功能

vue实现随机验证码功能的实例代码

评论“原生JS实现随机点名项目的实例代码”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

原生JS实现随机点名项目的实例代码

js,随机点名,js,点名,js随机

Vue基本使用之对象提供的属性功能

vue实现随机验证码功能的实例代码

评论“原生JS实现随机点名项目的实例代码”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存