帮我用HTML实现一个1到400随机抽取号数的网页抽奖器,只要有开始抽奖和重置抽奖器的按钮,每次只抽取一个号数,抽取号数的过程有随机数字滚动的动画,抽取号数不重复,要有已经抽取过的号数的显示区域,有美观的界面
时间: 2023-07-15 11:12:47 浏览: 74
js手机号批量滚动抽奖实现代码
好的,以下是一个简单的实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机抽奖器</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
font-size: 72px;
font-weight: bold;
margin-top: 50px;
}
#used {
margin-top: 30px;
}
</style>
</head>
<body>
<h1>随机抽奖器</h1>
<button id="startButton" onclick="start()">开始抽奖</button>
<button id="resetButton" onclick="reset()">重置抽奖器</button>
<div id="result"></div>
<div id="used"></div>
<script>
var usedNumbers = [];
function start() {
var resultElement = document.getElementById("result");
var usedElement = document.getElementById("used");
var number;
// 随机抽取未使用的号数
do {
number = Math.floor(Math.random() * 400) + 1;
} while (usedNumbers.includes(number));
// 显示随机抽取的号数
resultElement.innerHTML = "抽取中...";
var rollInterval = setInterval(function() {
resultElement.innerHTML = Math.floor(Math.random() * 400) + 1;
}, 50);
// 停止滚动动画并显示结果
setTimeout(function() {
clearInterval(rollInterval);
resultElement.innerHTML = number;
usedElement.innerHTML += number + ", ";
usedNumbers.push(number);
}, 3000);
}
function reset() {
var resultElement = document.getElementById("result");
var usedElement = document.getElementById("used");
// 清空结果和已使用的号数列表
resultElement.innerHTML = "";
usedElement.innerHTML = "";
usedNumbers = [];
}
</script>
</body>
</html>
```
这个实现包括开始抽奖和重置抽奖器的按钮,每次只抽取一个号数,抽取号数的过程有随机数字滚动的动画,抽取号数不重复,并且有已经抽取过的号数的显示区域。
阅读全文