HTML5 网页端年会抽奖源码，导入名单列表即可使用，2024金三银四
warning:
这篇文章距离上次修改已过284天，其中的内容可能已经有所变动。
以下是一个简单的HTML5网页代码示例，用于展示如何导入名单并进行抽奖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>年会抽奖系统</title>
<style>
#participants {
width: 300px;
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<h1>年会抽奖系统</h1>
<textarea id="participantsList" placeholder="请将参与者名单列表粘贴到这里，每个名字一行"></textarea><br>
<button onclick="importList()">导入名单</button>
<button onclick="startLottery()" disabled>开始抽奖</button><br>
<div id="participants"></div>
<script>
function importList() {
var list = document.getElementById('participantsList').value.split('\n');
var participantsDiv = document.getElementById('participants');
participantsDiv.innerHTML = ''; // 清空之前的内容
list.forEach(function(name) {
if (name) {
participantsDiv.innerHTML += '<p>' + name + '</p>';
}
});
document.getElementById('startLottery').disabled = false; // 启用开始抽奖按钮
}
function startLottery() {
var participants = document.getElementById('participants').getElementsByTagName('p');
var winner = participants[Math.floor(Math.random() * participants.length)];
alert('本次年会中奖者是：' + winner.textContent);
}
</script>
</body>
</html>这段代码包含了一个简单的名单导入功能和一个抽奖功能。用户可以通过textarea输入名单，每个名字一行。点击“导入名单”按钮后，名单将显示在<div>元素中，并且“开始抽奖”按钮将变为可用状态。当点击“开始抽奖”按钮后，JavaScript 会随机选择一个获奖者并通过alert弹窗显示。这个例子简单易懂，方便理解和使用。
评论已关闭