基于JS实现的随机数字抽签实例

2019-11-19 18:36:05

字体：大中小

来源：转载

供稿：网友

话不多说，附上源码，仅供大家参考

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title></title>  <script src="Scripts/jquery-1.10.2.js"></script>  <script type="text/javascript">    var numArray = new Array();    var personNum = 30;    $(function () {      for (var i = 0; i < personNum; i++) {        numArray[i] = i;      }      $("li").click(function () {        var n = Math.floor(Math.random() * numArray.length + 1) - 1; //生成随机数        $(this).text(numArray[n]);        numArray.splice(n, 1); //移除随机数      });      $("#btnStart").click(function () {        var totalArray = new Array();        $("li").each(function (i, v) {          totalArray[i] = v.innerText;        });        var n = Math.floor(Math.random() * totalArray.length + 1) - 1; //生成随机数        this.value = totalArray[n];        $("li").each(function (i, v) {          if (v.innerText == $("#btnStart").val()) {            this.style.background = "red";          }          else          {            this.style.background = "white";          }        });      });    });  </script>  <style type="text/css">    ul {      /*display: block;      float:left;*/    }      ul li {        width: 150px;        height: 150px;        line-height: 150px;        border: 1px solid gray;        float: left;        margin-left: 10px;        margin-top: 10px;        list-style-type: none;        text-align: center;        font-size: 20px;      }    #btnStart {      width: 100px;      height: 30px;      margin-left: 10px;      margin-top: 10px;    }  </style></head><body>  <div>    <ul>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>    </ul>    <ul>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>    </ul>    <ul>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>    </ul>    <ul>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>    </ul>    <ul>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>      <li>click me!</li>    </ul>  </div>  <input id="btnStart" type="button" value="Start" /></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：javascript垃圾收集机制的原理分析

下一篇：利用js+css+html实现固定table的列头不动