<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
width: 500px;
border: 1px solid;
}
li{
font-size: 30px;
border: 1px solid;
display: inline-block;
margin: 10px;
border-radius: 50%;
padding: 10px;
background-color: black;
color: white;
font-weight: bolder;
}
.sel{
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
</ul>
<button id="btn">random</button>
<script>
var btn = document.getElementById('btn');
var li = document.getElementsByTagName('li');
// 产生随机数
function rndNum(min,max){
return Math.floor((Math.random()*(max - min + 1)) + min);
}
// 把随机数添加进数组并判断是否重复
function rndArr(min,max,length){
var arr = [];
for(var i=0;i<length;i++){
var r = rndNum(min,max);
if(arr.indexOf(r) <0 ){
arr.push(r);
}else{
i--;
}
}return arr;
}
// 被选中的数改变颜色
function selColor(){
for(var i=0;i<li.length;i++){
li[i].className = "";
}
var arr = rndArr(0,30,7);
for(var i=0;i<arr.length;i++){
li[arr[i]].className = "sel"
}
}
// 通过点击事件触发
btn.onclick = function(){
var count = 0;
var timer = setInterval(function(){
selColor();
count++;
if(count == 50){
clearInterval(timer);
}
})
}
</script>
</body>
</html>
这里有30个li,索引值应该是0-29,而改变选中样式用的是li[arr[i]].className = "sel",那如果arr[i]等于1,li[1]就等于2了,岂不是取不到1,arr[i]=30的时候,li[30]是不存在的,那应该会少一个数,但事实可以取到1,也没见过少一个数的情况,这里应该怎样理解。
另外这段代码能执行,但是不知为何会报错。。。
var arr = rndArr(0,29,7);
你的思路是没有问题的,只是你在取一个最小值0-29的整数时所取得的随机数已经+1了,所以最大值不需要+1;
注意一下随机数是取的0-1之间的数,所以0.[0-9],0.0[.....]是一定会有的,所以也不需要考虑取不到1的情况。
帮你改了下。
function selColor() {
for (var i = 0; i < li.length; i++) {
li[i].className = "";
}
var arr = rndArr(1, 30, 7);
for (var i = 0; i < arr.length; i++) {
var index = arr[i] - 1;
li[index].className = "sel"
}
}
你这里说了。有30。li的索引值是0-29。生成随机数是1-30 7个,每个随机数-1就是每个随机数对应的li索引值