效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习：随机抽奖案例</title>
<style>
* {
box-sizing: border-box;
}
div {
margin: 100px auto;
padding: 100px 270px;
width: 800px;
height: 400px;
background: url(images/bg01.jpg) no-repeat left/contain;
}
</style>
</head>
<body>
<div>
<h1>一等奖：<Strong></Strong></h1>
<h2>二等奖：<strong></strong></h2>
<h3>三等奖：<strong></strong></h3>
</div>
<script>
const arr = ['张三', '李四', '王五', '赵六', '冯七']
for (let i = 0; i < 3; i++) {
let num = Math.floor(Math.random() * arr.length)
let stron = document.querySelectorAll("div strong")[i]
stron.innerHTML = arr[num]
arr.splice(num, 1)
}
</script>
</body>
</html>
