帮我用HTML实现一个1到400随机抽取号数的网页抽奖器,有开始抽奖和重置的按钮,每次抽取一个号数,抽取时有随机数字滚动的动画,抽取号数不重复,有已经抽取过的数字显示区,有美观的界面
时间: 2023-07-15 20:13:00 浏览: 40
好的,以下是一个简单的实现。需要注意的是,这个实现仅供参考,可能存在一些不足之处,如有需要可以进行优化。
```html
<!DOCTYPE html>
<html>
<head>
<title>抽奖器</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f6f6f6;
}
.container {
margin: 50px auto;
width: 500px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.number {
display: inline-block;
width: 60px;
height: 60px;
margin: 5px;
padding: 20px;
border: 2px solid #ccc;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 24px;
color: #333;
transition: all 0.5s;
}
.number.selected {
background-color: #ff9800;
color: #fff;
border-color: #ff9800;
}
.btn {
display: inline-block;
padding: 10px 20px;
margin: 10px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
background-color: #3e8e41;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
}
.result p {
margin: 0;
padding: 5px;
}
.animation {
animation: roll 1s linear infinite;
}
@keyframes roll {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1>抽奖器</h1>
<div class="numbers">
<?php
$numbers = range(1, 400);
shuffle($numbers);
foreach ($numbers as $number) {
echo '<div class="number" data-number="' . $number . '">' . $number . '</div>';
}
?>
</div>
<div class="buttons">
<button class="btn start">开始抽奖</button>
<button class="btn reset">重置</button>
</div>
<div class="result">
<p>已经抽取的号数:</p>
</div>
</div>
<script type="text/javascript">
var numbers = document.querySelectorAll('.number');
var selectedNumbers = [];
var startBtn = document.querySelector('.start');
var resetBtn = document.querySelector('.reset');
var result = document.querySelector('.result');
startBtn.addEventListener('click', function() {
if (selectedNumbers.length >= numbers.length) {
alert('已经抽完了所有的号数!');
return;
}
var rollTimes = 10; // 滚动次数
var delayTime = 100; // 每次滚动的时间间隔,单位为毫秒
var currentRollTimes = 0;
var timer = setInterval(function() {
// 移除上一次选中的号数
var lastSelectedNumber = document.querySelector('.number.selected');
if (lastSelectedNumber) {
lastSelectedNumber.classList.remove('selected');
}
// 随机选取一个号数
var availableNumbers = getAvailableNumbers(numbers, selectedNumbers);
var selectedIndex = Math.floor(Math.random() * availableNumbers.length);
var selectedNumber = availableNumbers[selectedIndex];
selectedNumbers.push(selectedNumber);
// 设置选中的号数样式
var selectedNumberElem = document.querySelector('.number[data-number="' + selectedNumber + '"]');
selectedNumberElem.classList.add('selected');
selectedNumberElem.classList.add('animation');
// 滚动动画
currentRollTimes++;
if (currentRollTimes >= rollTimes) {
clearInterval(timer);
selectedNumberElem.classList.remove('animation');
result.innerHTML += '<p>' + selectedNumber + '</p>';
}
}, delayTime);
});
resetBtn.addEventListener('click', function() {
selectedNumbers = [];
result.innerHTML = '<p>已经抽取的号数:</p>';
numbers.forEach(function(number) {
number.classList.remove('selected');
});
});
function getAvailableNumbers(numbers, selectedNumbers) {
var availableNumbers = [];
numbers.forEach(function(number) {
if (selectedNumbers.indexOf(number) < 0) {
availableNumbers.push(number);
}
});
return availableNumbers;
}
</script>
</body>
</html>
```
在这个实现中,首先使用 PHP 生成了一个包含 1 到 400 随机排列的号数的 div 列表,并将每个 div 的号数存在 data-number 属性中。然后使用 JavaScript 实现了开始抽奖和重置按钮的点击事件,并使用 setInterval 和 setTimeout 实现了抽奖时的滚动动画。在已经抽取过的数字显示区,使用一个简单的字符串拼接来实现添加新的已抽取号数。