前端随机抽奖代码示例 - 简单易懂的实现方法 - 常规

<!DOCTYPE html>
<html>
<head>
<title>随机抽奖代码示例 - 前端实现</title>
<style>
.winner {
font-weight: bold;
}
</style>
</head>
<body>
<h1>前端随机抽奖代码示例</h1>
<button id="startBtn" onclick="startLottery()">开始抽奖</button>
<p id="result"></p>
<script>
var participants = ["参与者1", "参与者2", "参与者3", "参与者4", "参与者5"]; // 参与抽奖的人员名单

function startLottery() {
var resultElement = document.getElementById("result");
var winnerIndex = Math.floor(Math.random() * participants.length); // 随机生成中奖人员索引
var winner = participants[winnerIndex];

resultElement.innerHTML = "中奖者是：" + winner;
resultElement.classList.add("winner"); // 添加中奖者样式

// 移除开始抽奖按钮
var startBtn = document.getElementById("startBtn");
startBtn.parentNode.removeChild(startBtn);
}
</script>
</body>
</html>