案例:随机抽奖
<!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>
.wrapper{
width: 820px;
height: 420px;
background: url(images/reward.jpg) no-repeat center / cover;
padding: 100px 250px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<strong>年会抽奖</strong>
<h1>一等奖: <span id = "one">???</span></h1>
<h3>二等奖: <span id = "two">???</span></h3>
<h5>三等奖: <span id = "three">???</span></h5>
</div>
<script>
// 1 声明数组
const personArr = ['张三', '小美','小红','小帅','小李']
// 先做一等奖
const random = Math.floor(Math.random() * personArr.length)
console.log(personArr[random])
// 获取元素,写入
const one = document.querySelector('#one')
one.innerHTML = personArr[random]
// 删除
personArr.splice(random,1)
console.log(personArr)
for(let i = 0; i<3; i++){
//二等奖三等奖一样
}
</script>
</body>
</html>