<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>caipiao</title> </head> <body> <div></div> <button>go</button> <button>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> <div> <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>机选红球</button> <button>清空</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); }
这样就实现了动态图的功能了(*^__^*) 嘻嘻！