好友
阅读权限25
听众
最后登录1970-1-1
|
幸运抽签小能手，
是一款多功能、实用且妙趣横生的网页小工具。
它专为年会抽奖、班级点名等各类需要随机选择的场景量身打造，并且完全免费开源！
年会抽奖点名-多场景抽签器2.0.zip
(2.65 KB, 下载次数: 191, 售价: 2 CB吾爱币)
----审核大佬，如果发错版块，请马上删除----各位且用且珍惜----欢迎大家深度拍砖！！
### 一键抽签，欢乐无穷仅需轻松输入名字，点击一下，我们的幸运抽签器便能迅速选出幸运者。无论是公司年会的激动人心抽奖时刻，从众多员工中选出幸运之星，送上丰厚大奖；还是在热闹非凡的班级聚会上，抽取表演节目的同学，增添欢乐氛围；亦或是在课堂上的随机提问，公平地选择回答问题的学生，它都能应对自如，为你带来无尽乐趣。### 界面美观，操作简便抽签器界面简洁美观，操作简单直观。每行输入一个名字，按下抽签键，结果瞬间呈现，让抽签过程高效且充满期待。在小型团队的团建活动中，组织者可以用它来抽取游戏参与者，快速开启趣味游戏环节。
### 安全验证，值得信赖增强了输入验证功能，确保名字中不存在特殊字符，有力保障抽签的公平性与专业性。在一些专业培训课程的抽奖环节，即使面对复杂的学员名单，也能确保抽签的公正性。
### 概率显示，科学辅助输入名字总数后，5次内抽中一次的概率会实时显示，让你对抽签结果有更科学的把握，辅助决策。比如在大型的粉丝见面会抽奖环节，主办方可以根据概率合理安排奖项设置和抽奖轮次。
### 重复保护，公平公正抽签器会自动排除已抽中的名字，保证每个名字都有相同的被抽中几率，真正做到公平公正。在学校的运动会比赛项目分组抽签中，能确保每个班级都有平等机会参与不同的比赛时段和对手组合。
### 重置功能，轻松重启右下角的“回到最初”按钮，可一键清空所有输入，快速回到初始状态，重新开始抽签。当一次抽奖活动结束，准备开启下一轮新的抽奖时，这个功能就非常实用，比如在社区举办的系列抽奖活动中。
### 免费开源，自由定制这款抽签器免费开源，你能根据自身需求对其定制，使其成为你的专属抽签神器。技术爱好者可以根据不同活动的主题风格，修改抽签器的外观和功能，比如为婚礼抽奖环节定制浪漫风格的抽签界面。
### 动态背景，增添惊喜每次抽签结果揭晓时，背景都会动态变化，为抽签结果赋予一份惊喜与乐趣。在儿童生日派对的抽奖游戏中，动态背景能让孩子们更加兴奋和投入。
### 多场景适用，功能强大无论是工作、学习还是娱乐，我们的抽签器都能完美适配，成为你决策时的得力助手。比如在办公室抽奖决定下午茶免单人员，或者在社团活动中抽取表演嘉宾，它都能轻松胜任。快来体验幸运抽签器，让每一次选择都满是乐趣与惊喜！
 欢迎各位大佬们，提出宝贵建议，代码如下：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幸运抽签器</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #e0e0e0;
background-image: url('background.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #333;
text-align: center;
}
.container {
text-align: center;
width: 90%;
max-width: 500px;
padding: 30px;
box-sizing: border-box;
}
h1 {
margin-bottom: 30px;
color: #333;
font-size: 30px;
font-weight: 600;
}
#nameInput {
width: 100%;
height: 120px;
margin-bottom: 25px;
padding: 15px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s;
}
#nameInput::-webkit-input-placeholder {
color: #666;
}
#nameInput:-moz-placeholder {
color: #666;
}
#nameInput::-moz-placeholder {
color: #666;
}
#nameInput:-ms-input-placeholder {
color: #666;
}
#nameInput:focus {
border-color: #FF6347;
}
#nameInput:invalid {
border-color: #E64A2D;
}
button {
padding: 12px 25px;
font-size: 18px;
background-color: #FF6347;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background-color: #E64A2D;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
button:active {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}
.footer {
position: fixed;
right: 10px;
bottom: 20px;
background-color: #fff;
padding: 5px 10px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-size: 14px;
color: #333;
}
.result-list {
margin-top: 20px;
list-style-type: none;
padding: 0;
font-size: 16px;
}
.result-list li {
margin-bottom: 10px;
background-color: #e6e6e6;
padding: 8px 15px;
border-radius: 4px;
}
.probability-info {
margin-top: 15px;
font-size: 16px;
color: #666;
}
.reset-button {
position: fixed;
right: 10px;
bottom: 60px;
padding: 8px 16px;
font-size: 14px;
background-color: #ccc;
color: #333;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.reset-button:hover {
background-color: #b3b3b3;
}
/* 加载动画样式 */
.loading {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 4px solid #f3f3f3;
border-top: 4px solid #FF6347;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1>幸运抽签器</h1>
<textarea id="nameInput" placeholder="每行输入一个名字"></textarea>
<button>开始抽签</button>
<ul class="result-list"></ul>
<div class="probability-info">
输入名字总数：<span id="totalNamesCount">0</span>个，5次内抽中一次的概率：<span id="probabilityValue">0%</span>
</div>
</div>
<button class="reset-button">回到最初</button>
<div class="footer">
Design by Nong Wenlong
</div>
<div class="loading"></div>
<script>
const pickedNames = [];
// 优化后的Fisher - Yates洗牌算法
function fisherYatesShuffle(array) {
let currentIndex = array.length,
randomIndex;
while (currentIndex > 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
}
return array;
}
function shuffleAndPick() {
const inputNames = document.getElementById('nameInput').value.split('\n').map(name => name.trim()).filter(name => name!== '');
const totalNamesCount = inputNames.length;
document.getElementById('totalNamesCount').textContent = totalNamesCount;
if (totalNamesCount === 0) {
alert('请输入至少一个名字');
return;
}
// 增强输入验证，禁止特殊字符
const illegalChars = /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/]/;
for (let i = 0; i < inputNames.length; i++) {
if (illegalChars.test(inputNames[i])) {
alert('名字中不能包含特殊字符，请重新输入。');
return;
}
}
let probability = 0;
if (totalNamesCount > 0) {
probability = (1 - Math.pow((totalNamesCount - 1) / totalNamesCount, 5)) * 100;
probability = probability.toFixed(2);
}
document.getElementById('probabilityValue').textContent = probability + '%';
let result;
do {
const shuffledNames = fisherYatesShuffle(inputNames);
result = shuffledNames[Math.floor(Math.random() * shuffledNames.length)];
} while (pickedNames.includes(result) && pickedNames.length >= 5);
pickedNames.unshift(result);
if (pickedNames.length > 5) {
pickedNames.pop();
}
const resultList = document.querySelector('.result-list');
resultList.innerHTML = '';
pickedNames.forEach(name => {
const listItem = document.createElement('li');
listItem.textContent = name;
resultList.appendChild(listItem);
});
// 显示加载动画
document.querySelector('.loading').style.display = 'block';
setTimeout(() => {
document.body.style.backgroundImage = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" font-family="Arial" font-size="32" text-anchor="middle" fill="white"><text x="50" y="50">${encodeURIComponent(result)}</text></svg>')`;
document.querySelector('.loading').style.display = 'none';
}, 1000);
}
function resetInput() {
document.getElementById('nameInput').value = '';
document.getElementById('totalNamesCount').textContent = 0;
document.getElementById('probabilityValue').textContent = '0%';
pickedNames.length = 0;
const resultList = document.querySelector('.result-list');
resultList.innerHTML = '';
}
</script>
</body>
</html>
|
免费评分
-
查看全部评分
|
发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。 |
|
|
|
|
|
|
[复制链接]
发表于 2024-11-18 10:07
古德古德