抽奖工具
效果，根据号码进行随机排序代码如下：
<!DOCTYPE html>
<html lang="zh">
<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;
text-align: center;
padding: 50px;
background-color: #f7f7f7;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: inline-block;
}
h1 {
color: #333;
}
input {
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
width: 60px;
}
button {
padding: 10px 20px;
margin: 20px 0;
border: none;
border-radius: 4px;
background-color: #5cb85c;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #4cae4c;
}
#result {
font-size: 2em;
margin-top: 20px;
transition: transform 1s;
display: inline-block;
}
.spin {
animation: spin 5s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>号码抽奖游戏</h1>
<input type="number" id="num1" placeholder="输入第一个号码" required>
<input type="number" id="num2" placeholder="输入第二个号码" required>
<input type="number" id="num3" placeholder="输入第三个号码" required>
<button id="drawButton">抽奖</button>
<div id="result"></div>
</div>
<script>
document.getElementById('drawButton').addEventListener('click', function() {
const num1 = parseInt(document.getElementById('num1').value);
const num2 = parseInt(document.getElementById('num2').value);
const num3 = parseInt(document.getElementById('num3').value);
if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
alert("请确保输入的是有效的数字！");
return;
}
const numbers = ;
const currentDate = new Date();
const seed = currentDate.getTime(); // 使用当前时间作为随机种子
const shuffledNumbers = shuffle(numbers, seed);
const resultDiv = document.getElementById('result');
resultDiv.textContent = ''; // 清除之前的结果
resultDiv.classList.add('spin'); // 添加旋转效果
setTimeout(() => {
resultDiv.classList.remove('spin'); // 移除旋转效果
resultDiv.textContent = '抽奖结果: ' + shuffledNumbers.join(', ');
}, 5000); // 5秒后显示结果
});
function shuffle(array, seed) {
let m = array.length, t, i;
let s = new Date().getTime() ^ seed; // 使用当前时间与种子结合作为随机种子
while (0 !== m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array;
array = array;
array = t;
//适度“洗牌”以增加随机性
s = (s + array + array) % 31;
}
return array;
}
</script>
</body>
</html>
代码复制粘贴，保存格式为 .html 点击即可运行 优化了一下
<!DOCTYPE html>
<html lang="zh">
<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;
text-align: center;
padding: 50px;
background-color: #f7f7f7;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: inline-block;
max-width: 90%;
}
h1 {
color: #333;
}
input {
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
width: 80px;
font-size: 1em;
}
button {
padding: 10px 20px;
margin: 20px 0;
border: none;
border-radius: 4px;
background-color: #5cb85c;
color: white;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
button:hover {
background-color: #4cae4c;
transform: scale(1.05);
}
#result {
font-size: 1.5em;
margin-top: 20px;
color: #007bff;
display: inline-block;
}
.spin {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>号码抽奖游戏</h1>
<p>请输入三个号码（0-99）：</p>
<input type="number" id="num1" min="0" max="99" placeholder="号码1">
<input type="number" id="num2" min="0" max="99" placeholder="号码2">
<input type="number" id="num3" min="0" max="99" placeholder="号码3">
<br>
<button id="drawButton">开始抽奖</button>
<div id="result"></div>
</div>
<script>
document.getElementById('drawButton').addEventListener('click', function() {
const num1 = parseInt(document.getElementById('num1').value);
const num2 = parseInt(document.getElementById('num2').value);
const num3 = parseInt(document.getElementById('num3').value);
if (.some(isNaN)) {
alert("请输入有效的数字！");
return;
}
const numbers = ;
const resultDiv = document.getElementById('result');
resultDiv.textContent = '抽奖中，请稍候...';
resultDiv.classList.add('spin');
setTimeout(() => {
const shuffledNumbers = shuffle(numbers);
resultDiv.classList.remove('spin');
resultDiv.textContent = `抽奖结果: ${shuffledNumbers.join(', ')}`;
}, 2000); // 2秒后显示结果
});
function shuffle(array) {
let m = array.length, t, i;
while (m) {
i = Math.floor(Math.random() * m--);
t = array;
array = array;
array = t;
}
return array;
}
</script>
</body>
</html>
感谢分享 这个不算抽奖吧？ 优秀优秀 运行成功了 挺不错的、还可以 可以用来公司年会抽奖用{:1_918:} 哈哈还刚好用得上，谢谢~~~ 可以用上活动了 学习了！！！！