代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fu{
width: 600px;
height: 300px;
margin: 0 auto;
position: relative;
}
.zi{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="fu">
<img src="https://20hpa4-1321289440.cos.ap-nanjing.myqcloud.com/teng/applet/static/3c5f630400804b2eadb0d61e69aef4cb.jpg" alt="">
<div class="zi">
<h4>年会抽奖</h4>
<h2></h2>
<h3></h3>
<h5></h5>
</div>
<button>点击抽奖</button>
</div>
</div>
<script>
let btn = document.querySelector('button')
btn.οnclick=function cj(){
// 随机点名
let arr = ['杨胜',
'陈亚茹',
'孙忆桐',
'李星辉',
'颜浩然',
'孔杰',
'孟玥瑶',
'李超',
]
let h2 = document.getElementsByTagName('h2')[0]
let h3 = document.getElementsByTagName('h3')[0]
let h5 = document.getElementsByTagName('h5')[0]
let index =Math.floor(Math.random()*arr.length)
h2.innerHTML=`一等奖:${arr[index]}`
let index2 =Math.floor(Math.random()*arr.length)
for(let i=0;i<arr.length;i++){
if(index!==index2){
h3.innerHTML=`二等奖:${arr[index2]}`
break;
}else{
index2 =Math.floor(Math.random()*arr.length)
}
}
let index3 =Math.floor(Math.random()*arr.length)
for(let i=0;i<arr.length;i++){
if(index!==index3&&index2!==index3){
h5.innerHTML=`三等奖:${arr[index3]}`
break;
}else{
index3 =Math.floor(Math.random()*arr.length)
}
}
}
</script>
</body>
</html>
效果图:
标签:arr,抽奖,random,JS,点击,let,index2,index3,Math From: https://blog.csdn.net/yyyyyyysc/article/details/143116853