js实现随机抽选效果、随机抽选红色球效果

2019-11-19 17:56:51

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>caipiao</title></head><body>  <div id="wrap"></div>  <button id="goBtn">go</button>  <button id="stopBtn">stop</button>  <script type="text/javascript">  var wrap = document.getElementById("wrap");  var goBtn = document.getElementById("goBtn");  var stopBtn = document.getElementById("stopBtn");  function rnd(min, max) {    return parseInt(Math.random()*(max - min + 1) + min);  }  function rndArray(min, max, length) {    //先定义一个空数组    var arr = [];    //生成一个长度为7的数组    while(arr.length < length) {      //生成一个随机数      var rand = rnd(min, max);      //判断生成的随机数rand是否在数组arr里,果然不在，就将这个随机数插入到数组里，如果在，执行下一次循环      if(arr.indexOf(rand) == -1) {        arr.push(rand);      }    }    arr.sort(function(a, b){return a - b;})    return arr;  }    //rndArray(最小范围值,最大范围值,个数)  wrap.innerHTML = rndArray(1,33,7);  var timer = 0;  goBtn.onclick = function() {    clearInterval(timer);    timer = setInterval(function() {      wrap.innerHTML = rndArray(1,33,7);    },100)    console.log(timer);  }  stopBtn.onclick = function() {    clearInterval(timer);  }  </script></body></html>

随机抽选

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>caipiao</title>  <style type="text/css">    * {      margin:0;      padding: 0;    }    #wrap {      width:621px;      margin:0 auto;      padding:50px 0;      background-color:rgb(255, 242, 242);    }    #inner {      width:490px;      margin:0 auto;      overflow: hidden;    }    #inner span {      float: left;      width:30px;      height: 30px;       border-radius: 15px;      border:1px solid #d9d9d9;      line-height: 30px;      text-align: center;      color:#333;      background-color: #f8f8f8;      margin:18px 6px;    }    #inner span.active {      background-color: red;      color:#fff;    }    #wrap p {      text-align: center;    }    button {      border:none;      outline: none;      width:120px;      height: 40px;      line-height: 40px;      font-size: 20px;      border-radius: 4px;    }    #selectBtn {      background-color: red;      color:#fff;    }  </style></head><body>  <div id="wrap">    <div id="inner">      <span>01</span>      <span>02</span>      <span>03</span>      <span>04</span>      <span>05</span>      <span>06</span>      <span>07</span>      <span>08</span>      <span>09</span>      <span>10</span>      <span>11</span>      <span>12</span>      <span>13</span>      <span>14</span>      <span>15</span>      <span>16</span>      <span>17</span>      <span>18</span>      <span>19</span>      <span>20</span>      <span>21</span>      <span>22</span>      <span>23</span>      <span>24</span>      <span>25</span>      <span>26</span>      <span>27</span>      <span>28</span>      <span>29</span>      <span>30</span>      <span>31</span>      <span>32</span>      <span>33</span>    </div>    <p>      <button id="selectBtn">机选红球</button>      <button id="clearBtn">清空</button>    </p>  </div>  <script type="text/javascript">  var wrap = document.getElementById("wrap");  var selectBtn = document.getElementById("selectBtn");  var clearBtn = document.getElementById("clearBtn");  var ballList = document.getElementById("wrap").getElementsByTagName("span");  function rnd(min, max) {    return parseInt(Math.random()*(max - min + 1) + min);  }  function rndArray(min, max, length) {    //先定义一个空数组    var arr = [];    //生成一个长度为7的数组    while(arr.length < length) {      //生成一个随机数      var rand = rnd(min, max);      //判断生成的随机数rand是否在数组arr里,果然不在，就将这个随机数插入到数组里，如果在，执行下一次循环      if(arr.indexOf(rand) == -1) {        arr.push(rand);      }    }    arr.sort(function(a, b){return a - b;})    return arr;  }  selectBtn.onclick = function() {    for(var j = 0; j < ballList.length; j++) {      ballList[j].className = "";      }    var arr = rndArray(1,33,7);    console.log(arr);    for(var i = 0; i < arr.length; i++) {      ballList[arr[i]-1].className = "active";    }  }  clearBtn.onclick = function() {    for(var j = 0; j < ballList.length; j++) {      ballList[j].className = "";      }  }  </script></body></html>

要实现点击得到自动随机数还得在clearBtn.onclick前面添加个定时器

var timer = 0;  selectBtn.onclick = function() {    clearTimeout(timer);    timer = setInterval(selectBall,100);    setTimeout(function() {      clearTimeout(timer);    },3000)    // clearTimeout(timer);  }

这样就实现了动态图的功能了(*^__^*) 嘻嘻！

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

上一篇：BootStrap表单验证实例代码

下一篇：bootstrap滚动监控器使用方法解析