怎样才能抽不中平板和电脑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
#prize{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100px;
display: block;
width: 320px;
height: 40px;
background-color: rgb(255, 255, 255);
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 2px;
letter-spacing: 2px;
text-align: center;
line-height: 40px;
}
div{
width: 330px;
height: 330px;
position: relative;
left: 50%;
top:50%;
transform:translate(-50%,50%);
}
div>span{
float: left;
width: 100px;
height: 100px;
margin: 5px;
background: rgb(22, 186, 236);
color: white;
text-align: center;
line-height: 100px;
}
div>span:nth-of-type(4){
position: relative;
left: 220px;
}
div>span:nth-of-type(5){
position: relative;
left: 110px;
top:110px;
}
div>span:nth-of-type(6){
position: relative;
left: -110px;
top:110px;
}
div>span:nth-of-type(8){
position: relative;
left: -110px;
top:-110px;
}
div>span:nth-of-type(9){
cursor: pointer;
background: rgb(255, 148, 61);
position: relative;
left: -110px;
top:-110px;
}
div .aa{
background: rgb(78, 78, 78);
}
</style>
</head>
<body>
<p id='prize'></p>
<div>
<span class="aa">手机</span>
<span>平板</span>
<span>电磁炉</span>
<span>洗衣机</span>
<span>衣柜</span>
<span>冰箱</span>
<span>电脑</span>
<span>电视</span>
<span>开始</span>
</div>
</body>
<script>
var prize= document.getElementById('prize');
var spans = document.querySelectorAll("div>span");
function start(){
// if(typeof(num)=='undefined'){
// // spans[num].classList.remove('aa'); // 清空上一次结果
// console.log('hhh')
// }
spans.forEach(function(el,index){
if(index!=0){
el.classList.remove('aa'); // 清空上一次结果
}
})
prize.textContent='';
spans[8].style.cursor="not-allowed";
spans[8].onclick=null;
let num=-1; //奖品序号
let times=parseInt(Math.random()*(30-18+1)+18,10);
let time=0; //当前的旋转次数
let speed=100; //转盘速度
timer = setInterval(function(){
num++;
time++;
if(num > 7){
num = 0;
spans[0].classList.add('aa');
spans[7].classList.remove('aa');
}else if(num==0){
spans[num].classList.add('aa');
spans[7].classList.remove('aa');
}else{
spans[num].classList.add('aa');
spans[num-1].classList.remove('aa');
}
if(time>times){
spans[8].onclick=start;
spans[8].style.cursor="pointer";
clearInterval(timer);
prize.textContent='恭喜您抽中了'+spans[num].textContent+'!!!';
}
},speed)
}
spans[8].onclick=start;
</script>
</html>
通过times可以计算得到的奖项，如果是平板（1）或者电脑（6）times+1将奖项设置为下一个
帮助到你可以点击采纳吗，谢谢~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#prize {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100px;
display: block;
width: 320px;
height: 40px;
background-color: rgb(255, 255, 255);
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 3px 2px;
letter-spacing: 2px;
text-align: center;
line-height: 40px;
}
div {
width: 330px;
height: 330px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,50%);
}
div > span {
float: left;
width: 100px;
height: 100px;
margin: 5px;
background: rgb(22, 186, 236);
color: white;
text-align: center;
line-height: 100px;
}
div > span:nth-of-type(4) {
position: relative;
left: 220px;
}
div > span:nth-of-type(5) {
position: relative;
left: 110px;
top: 110px;
}
div > span:nth-of-type(6) {
position: relative;
left: -110px;
top: 110px;
}
div > span:nth-of-type(8) {
position: relative;
left: -110px;
top: -110px;
}
div > span:nth-of-type(9) {
cursor: pointer;
background: rgb(255, 148, 61);
position: relative;
left: -110px;
top: -110px;
}
div .aa {
background: rgb(78, 78, 78);
}
</style>
</head>
<body>
<p id='prize'></p>
<div>
<span class="aa">手机</span>
<span>平板</span>
<span>电磁炉</span>
<span>洗衣机</span>
<span>衣柜</span>
<span>冰箱</span>
<span>电脑</span>
<span>电视</span>
<span>开始</span>
</div>
</body>
<script>
var prize = document.getElementById('prize');
var spans = document.querySelectorAll("div>span");
function start() {
// if(typeof(num)=='undefined'){
// // spans[num].classList.remove('aa'); // 清空上一次结果
// console.log('hhh')
// }
spans.forEach(function (el, index) {
if (index != 0) {
el.classList.remove('aa'); // 清空上一次结果
}
})
prize.textContent = '';
spans[8].style.cursor = "not-allowed";
spans[8].onclick = null;
let num = -1; //奖品序号
let times = parseInt(Math.random() * (30 - 18 + 1) + 18, 10);
let hits = [1, 6],//平板和电脑的下标，从0开始
prizeIndex = times % 8;//得到奖项
if (hits.findIndex(i => i == prizeIndex) != -1) {
times += 1;//如果得奖的是hits中奖项，不将奖项设置为下一项
}
let time = 0; //当前的旋转次数
let speed = 100; //转盘速度
timer = setInterval(function () {//1,6
num++;
time++;
if (num > 7) {
num = 0;
spans[0].classList.add('aa');
spans[7].classList.remove('aa');
} else if (num == 0) {
spans[num].classList.add('aa');
spans[7].classList.remove('aa');
} else {
spans[num].classList.add('aa');
spans[num - 1].classList.remove('aa');
}
if (time > times) {
spans[8].onclick = start;
spans[8].style.cursor = "pointer";
clearInterval(timer);
prize.textContent = '恭喜您抽中了' + spans[num].textContent + '!!!';
}
}, speed)
}
spans[8].onclick = start;
</script>
</html>
学学TX，
if 结果=平板或电脑
then priint 很遗憾本次没有中奖
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps: 问答会员年卡【8折】购 ，限时加赠IT实体书，即可 享受50次 有问必答服务，了解详情>>>https://t.csdnimg.cn/RW5m