1.先写好html 页面要呈现的内容。
HTML内容如下:
<div class="Sudoku">
<div class="one">口红</div>
<div class="two">耳机</div>
<div class="three">衣服</div>
<div class="four">华为p60</div>
<div class="five">键盘</div>
<div class="six">美甲</div>
<div class="seven">苹果15</div>
<div class="eight">蛋糕</div>
<button class="click" id="clicks">点击抽奖</button>
</div>
2.然后使用CSS样式给内容添加颜色 大小 做好定位。
CSS样式如下:
<style>
.Sudoku {
width: 380px;
height: 380px;
position: relative;
}
.click {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 20px;
background-color: #aaff7f;
position: absolute;
margin-top: 140px;
margin-left: 140px;
}
.one {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: mistyrose;
position: absolute;
margin: 20px;
}
.two {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: mistyrose;
position: absolute;
margin-left: 140px;
margin-top: 20px;
}
.three {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: mistyrose;
position: absolute;
margin-left: 260px;
margin-top: 20px;
}
.four {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: mistyrose;
position: absolute;
margin-left: 260px;
margin-top: 140px;
}
.five {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: mistyrose;
position: absolute;
margin-left: 260px;
margin-top: 260px;
}
.six {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: mistyrose;
position: absolute;
margin-left: 140px;
margin-top: 260px;
}
.seven {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: mistyrose;
position: absolute;
margin-left: 20px;
margin-top: 260px;
}
.eight {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: mistyrose;
position: absolute;
margin-left: 20px;
margin-top: 140px;
}
</style>
JS代码如下:
<script>
let clicks = document.getElementById('clicks');
let Sudoku = document.getElementsByClassName('Sudoku')[0];
let prizes = Sudoku.getElementsByTagName('div');
console.log(prizes);
let i = 0;
let speed = 0;
let time = 500;
let inter;
let num;
clicks.onclick = asbo;
function asbo() {
prizes[i].style.backgroundColor = '#d6c5ff';
inter = setInterval(rotates, time);
num = Math.floor(Math.random() * prizes.length);
console.log(num);
clicks.onclick = null;
}
function rotates() {
if (i < prizes.length - 1) {
i++;
prizes[i].style.backgroundColor = '#d6c5ff';
prizes[i - 1].style.backgroundColor = '#FFE4E1';
console.log(time);
} else {
i = 0;
prizes[i].style.backgroundColor = '#d6c5ff';
prizes[prizes.length - 1].style.backgroundColor = '#FFE4E1';
speed++;
console.log(speed);
}
if (speed < 2) {
time -= 100;
if (time < 100) {
time = 100
}
} else if (speed > 4) {
time += 70;
if (time > 1000) {
time = 1000;
}
}
if (i == num && speed > 5) {
clearInterval(inter);
setTimeout(function() {
alert("恭喜获得" + prizes[i].innerHTML);
speed = 0;
clicks.onclick = asbo;
}, 300);
} else {
clearInterval(inter);
inter = setInterval(rotates, time);
}
}
</script>