문서<br>.list {<br> margin: 50px auto;<br> padding: 0;<br> list-style-type: none;<br> width: 300px;<br> position:relative;<br>} <br>.list li { <br> 위치: 절대;<br> 테두리: 1px 솔리드 #000;<br> 너비: 98px;<br> 높이: 98px;<br> 텍스트 정렬: 센터;<br> 줄 높이: 98px;<br> 글꼴 크기: 20px;<br>}<br>.list li :n번째 유형(1){<br> 왼쪽: 0;<br> 위쪽: 0;<br>}<br>.list li:n번째 유형(2){<br> 왼쪽: 100px;<br> 위쪽: 0;<br>}<br>. 목록 li:nth-of-type(3){<br> 왼쪽: 200px;<br> 위쪽: 0;<br>}<br>.list li:nth-of-type(4){<br> 왼쪽: 200px;<br> 위쪽: 100px;<br>} <br>.list li:nth-of-type(5){<br> 왼쪽: 100px;<br> 위쪽: 100px;<br>}<br>.list li:nth-of-type(6){<br> 왼쪽: 200px;<br> 위쪽: 200px; <br>}<br>.list li:nth-of-type(7){<br> 왼쪽: 100px;<br> 위쪽: 200px;<br>}<br>.list li:nth-of-type(8){<br> 왼쪽: 0px;<br> 위쪽: 200px;<br>}<br>.list li:nth-of-type(9){<br> 왼쪽: 0px;<br> 위쪽: 100px;<br>}<br>.list 범위 {<br> 디스플레이: 블록;<br> 높이: 100%;<br> 배경: # ccc;<br>}<br>.list .show {<br> 배경: #f60;<br> 색상: #fff;<br>}<br><br>window.onload = function( ){<br> varspans = document.querySelectorAll('span');<br> var a = document.querySelector('a');<br> var nub = 5;<br> var 타이머 = 0;<br> a.onclick = function(){<br> var 목표 = [0,1,5,2,7];<br> var 길이 = (Math.round(Math.random()*4) + 2)*spans.length+1+target[Math.floor(Math. 무작위()*target.length)];<br> var arr = [];<br> var now = 0;<br> var 지연 = 50;<br> console.log(length);<br> for(var i = 0; 나는 < 길이; i++){<br/> arr.push(i);<br/> }<br/> setShow();<br/> function setShow(){<br/> 타이머 = setTimeout(function(){<br/> for(var i = 0; i <spans.length; i++) {<br/>spans[i].className = "";<br/> }<br/>spans[arr[now]%spans.length].className = "show";<br/> now++;<br/> //递归终止条件<br/> if(now < arr. 길이){<br/> 지연 += 10;<br/> setShow();<br/> }<br/> },delay);<br/> }<br/> };<br/>}; <br/> 三等奖 li> 谢谢惠顾 三等奖 이중형 开始抽奖 li> 一等奖 谢谢惠顾 2等奖 3等奖 < /ul>