先看效果图
点击抽奖,将会顺时针旋转。停留概率,转动速率可以控制。
我自己做的过程中遇到的小问题。
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;}