企业公司HTML年会抽奖单页源码免费分享
2025-01-08 12:05
233
| 来源：
春节将至，很多公司都会开展年会活动，那么如何制作一个专门用于本公司内部抽奖的网页呢。年会抽奖单页HTML源码无后台，抽奖名单存储在文件中，抽奖结束后会动态更新中奖人员名单。
年会抽奖单页HTML源码无后台，抽奖名单存储在文件中，抽奖结束后会动态更新中奖人员名单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公司年会抽奖</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>公司年会抽奖</h1>
<button onclick="start()">开始抽奖</button>
<div id="result"></div>
<script>
// 抽奖名单数组
var participants = ["张三", "李四", "王五", "赵六", "孙七", "周八"];
// 已中奖名单数组
var winners = [];
function start() {
if (participants.length === 0) {
document.getElementById("result").innerHTML = "抽奖名单已空，无更多可抽奖人员";
return;
}
var randomIndex = Math.floor(Math.random() * participants.length);
var winner = participants[randomIndex];
while (winners.includes(winner)) {
randomIndex = Math.floor(Math.random() * participants.length);
winner = participants[randomIndex];
}
winners.push(winner);
document.getElementById("result").innerHTML = "中奖者：" + winner;
// 可在此处添加将中奖者从抽奖名单中移除的代码，以实现每人仅中奖一次
// participants.splice(randomIndex, 1);
}
</script>
</body>
</html>
上述代码定义了一个简单的抽奖程序，点击 “开始抽奖” 按钮后，会从预设的抽奖名单中随机抽取一名中奖者，并显示在页面上。如果想实现更复杂的功能，如限制每人只能中奖一次、从文件中读取抽奖名单、设置不同奖项等，可以参考以下内容：
限制每人只能中奖一次
在start函数中，添加将中奖者从抽奖名单中移除的代码participants.splice(randomIndex, 1);，这样抽中的人就不会再被抽到。
从文件中读取抽奖名单
</head>
<body>
<h1>公司年会抽奖</h1>
<input type="file" id="fileInput">
<button onclick="start()">开始抽奖</button>
<div id="result"></div>
<script>
var participants = [];
var winners = [];
document.getElementById("fileInput").addEventListener("change", function (e) {
var file = e.target.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
var contents = e.target.result;
participants = contents.split("\n").map(function (line) {
return line.trim();
});
};
reader.readAsText(file);
}
});
function start() {
if (participants.length === 0) {
document.getElementById("result").innerHTML = "抽奖名单已空，无更多可抽奖人员";
return;
}
var randomIndex = Math.floor(Math.random() * participants.length);
var winner = participants[randomIndex];
while (winners.includes(winner)) {
randomIndex = Math.floor(Math.random() * participants.length);
winner = participants[randomIndex];
}
winners.push(winner);
document.getElementById("result").innerHTML = "中奖者：" + winner;
participants.splice(randomIndex, 1);
}
</script>
</body>
</html>
上述代码添加了一个文件输入框，允许用户上传一个包含抽奖名单的文本文件，每行一个姓名。在选择文件后，会自动读取文件内容并将姓名添加到抽奖名单中。
设置不同奖项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公司年会抽奖</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
.prize {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>公司年会抽奖</h1>
<input type="file" id="fileInput">
<button onclick="start('一等奖')">抽取一等奖</button>
<button onclick="start('二等奖')">抽取二等奖</button>
<button onclick="start('三等奖')">抽取三等奖</button>
<div id="result"></div>
<script>
var participants = [];
var winners = [];
document.getElementById("fileInput").addEventListener("change", function (e) {
var file = e.target.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
var contents = e.target.result;
participants = contents.split("\n").map(function (line) {
return line.trim();
});
};
reader.readAsText(file);
}
});
function start(prize) {
if (participants.length === 0) {
document.getElementById("result").innerHTML = "抽奖名单已空，无更多可抽奖人员";
return;
}
var randomIndex = Math.floor(Math.random() * participants.length);
var winner = participants[randomIndex];
while (winners.includes(winner)) {
randomIndex = Math.floor(Math.random() * participants.length);
winner = participants[randomIndex];
}
winners.push(winner);
document.getElementById("result").innerHTML = "中奖者：" + winner + " 获得 " + prize;
participants.splice(randomIndex, 1);
}
</script>
</body>
</html>
上述代码添加了三个按钮，分别用于抽取不同的奖项。点击每个按钮时，会在抽奖结果中显示中奖者和所获奖项。
用户评论
热门评论
最新评论