欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-10-28 20:57:34
核心思想 •随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停。 所用知识 •math.random() * num:...

核心思想

•随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停。

所用知识

•math.random() * num: 产生从0到num的随机数
•math.floor(): 向下取整
•简单的dom操作等

技术扩展

•扩展人数
•添加停止键等

效果

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

代码如下

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

总结

以上所述是小编给大家介绍的原生js实现随机点名项目的实例代码,希望对大家有所帮助