先看效果圖
點擊抽獎，將會順時針旋轉。停留概率，轉動速率可以控制。
我自己做的過程中遇到的小問題。
i: 順時針旋轉。
因爲結構用的是li，順時針旋轉本質上是背景的變化，這裏我定義了一個數組來處理順時針旋轉的問題。
var arr= [0,1,2,4,7,6,5,3]; //爲了標記li使背景順時針旋轉，內容對應的是li的位置信息
document.getElementsByTagName('li')[arr[i]].className='cur';
if((i-1)>=0){
document.getElementsByTagName('li')[arr[i-1]].className='';
}
ii:旋轉速度的控制
處理的辦法就是設定一個標記，當標記變化時動態改變計時器的時間間隔。 動態改變計時器時間間隔的示例代碼如下：
var t = 200;
var set1 = setInterval(fn, t);
function fn() {
console.log('我是用來測試打印速度的');
t -= 10;
clearInterval(set1);
if (t > 0) {
set1 = setInterval(fn, t);
}
}
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>抽獎器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<button class="chou">抽獎</button>
</div>
<body>
<script src="srcipt.js"></script>
</body>
</html>
window.onload=function(){
function getElement(el) {
var els = el.substr(1);
return el.substr(0,1) ==='#' ? document.getElementById(els): document.getElementsByClassName(els)[0];
}
var arr= [0,1,2,4,7,6,5,3]; //爲了標記li使背景順時針旋轉
var i=0;
var cir=0; //轉動的圈數
var flag=false; //排除第一次循環，處理class問題。
var speed= 300; //轉動的速度
var stops = Math.floor(Math.random()*5+30);//停止轉動的最小圈數。圈數要範圍小
var jiangpin=0; //概率設定
var btn = getElement('.chou'); //抽獎按鈕
btn.addEventListener('click',function(){
btn.timer= setInterval(xuanzhan,speed)
btn.disabled=true; //點擊後使按鈕失效
});
function xuanzhan() {
console.log('停止轉動的圈數：'+ stops)
console.log('圈數：'+ cir)
document.getElementsByTagName('li')[arr[i]].className='cur';
if((i-1)>=0){
document.getElementsByTagName('li')[arr[i-1]].className='';
}
i=i+1;
if(i>7){
i=0;
flag=true;
cir=cir+1;
jiangpin= Math.floor((Math.random()*100+1)); //獎品限定 規定2，4,6概率90%，1 概率10%
}
if(cir>1&&cir<=20){
speed=30;
clearInterval(btn.timer);
btn.timer = setInterval(xuanzhan,speed);
}
if(cir>20&&cir<stops){
speed=speed+3;
clearInterval(btn.timer);
btn.timer = setInterval(xuanzhan,speed);
}
if(flag===true&&i===1){
document.getElementsByTagName('li')[arr[7]].className='';
}
if(cir>stops){
console.log("你進來了嗎")
var el = document.getElementsByClassName('cur')[0].innerText; //string類型。注意類型轉換
console.log("el的值是："+el)
console.log(jiangpin)
//這裏設置概率的邏輯
if(el==2&&jiangpin>=1&&jiangpin<=10){ //概率是10%
clearInterval(btn.timer)
btn.disabled=false;
}
if(el==4&&jiangpin>=20&&jiangpin<=90){ //概率80%
clearInterval(btn.timer);
btn.disabled=false;
}
if(el==1){ ////概率是10%
if(jiangpin>=91){
console.log('我是二')
clearInterval(btn.timer);
btn.disabled=false;
}
}
}
};
}
ul {
list-style-type: none; height:300px; width:300px;
}
li { text-align: center; line-height: 100px;float: left; width:100px; height: 100px; background: green; border: 1px solid black;box-sizing: border-box; margin-top:-1px;margin-left:-1px;}
li:nth-child(4){
margin-right: 100px;
}
li:nth-child(5){
margin-left: -2px;
}
.chou { height: 100px; width: 100px; position: absolute; background: cornflowerblue; left: 146px; top: 114px; text-align: center; line-height: 100px; border: none;
}
.cur { background: darkgoldenrod;}