效果，根据号码进行随机排序
代码如下：
[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;
}
h1 {
color: #333;
}
input[type="number"] {
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 = [num1, num2, num3];
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[m];
array[m] = array[i];
array[i] = t;
//适度“洗牌”以增加随机性
s = (s + array[m] + array[i]) % 31;
}
return array;
}
</script>
</body>
</html>
代码复制粘贴，保存格式为 .html 点击即可运行 | 
发表于 2024-11-21 15:11
