<!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>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
border: 1px solid slateblue;
margin: 100px auto;
}
.box p{
width: 100%;
height: 50px;
text-align: center;
}
.box p button{
width: 100px;
height: 50px;
}
.box .content{
width: 90%;
margin: 100px auto;
text-align: center;
}
.box .content img{
width: 50%;
}
</style>
</head>
<body>
<div class="box">
<p>
<button class="start">开始抽奖</button>
<button class="end">结束抽奖</button>
</p>
<div class="content">
<img class="imgs" src="./img/cellPhone.webp">
<P class="giftName">小米手机</P>
</div>
</div>
</body>
</html>
<script src="./js/utils.js"></script>
<script>
//奖池
let arr = [
{
imgUrl:'./img/cellPhone.webp',
title:'小米手机'
},
{
imgUrl:'./img/ear.webp',
title:'小米耳机'
},
{
imgUrl:'./img/pen.webp',
title:'小米巨能写'
},
{
imgUrl:'./img/shoes.webp',
title:'小米跑鞋'
},
{
imgUrl:'./img/tv.webp',
title:'小米电视'
},
{
imgUrl:'./img/thanks.webp',
title:'谢谢惠顾'
}
]
//获取元素
let start = $(".start");
let end = $(".end");
let imgs = $(".imgs");
let giftName = $('.giftName');
//相当于存入
let timer = null;
//相当于从第几开始获取
let index = 0;
//开始抽奖
start.onclick = function(){
timer = setInterval(function(){
//获取随机数
index = Math.floor(Math.random()*arr.length);
imgs.setAttribute("src",arr[index].imgUrl);
giftName.innerHTML = arr[index].title;
},50);
}
end.onclick = function(){
clearInterval(timer);
//"奸商代码"
let i = Math.floor(Math.random()*10);
if(i<8){
index = arr.length - 1;
img.setAttribute("src",arr[index].imgUrl);
giftName.innerHTML = arr[index].title;
}
setTimeout(function(){
if(arr[index].title === "谢谢惠顾"){
alert("谢谢惠顾");
return;
}
alert("恭喜抽中"+arr[index].title);
},50)
}
</script>
js抽奖代码
最新推荐文章于 2024-04-09 15:55:50 发布