写一个js加css的抽奖代码
时间: 2023-03-19 11:23:35 浏览: 82
以下是一个使用 JavaScript 和 CSS 实现的简单抽奖代码:
HTML:
```html
<div id="container">
<div id="result"></div>
<button id="btn">开始抽奖</button>
</div>
```
CSS:
```css
#container {
width: 300px;
height: 200px;
margin: auto;
text-align: center;
font-size: 24px;
font-weight: bold;
}
#result {
margin-top: 50px;
padding: 20px;
border: 5px solid #000;
border-radius: 10px;
}
#btn {
margin-top: 30px;
padding: 10px;
font-size: 18px;
font-weight: bold;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
}
```
JavaScript:
```javascript
// 奖品列表
const prizes = ['一等奖', '二等奖', '三等奖', '幸运奖'];
// 获取 DOM 元素
const container = document.getElementById('container');
const result = document.getElementById('result');
const btn = document.getElementById('btn');
// 设置按钮点击事件
btn.addEventListener('click', function() {
// 生成随机数
const index = Math.floor(Math.random() * prizes.length);
// 显示中奖结果
result.innerText = `恭喜您获得了${prizes[index]}!`;
// 播放动画
container.classList.remove('animate');
void container.offsetWidth;
container.classList.add('animate');
});
```
代码解释:
1. 在 HTML 中定义了一个容器 `div`,其中包含一个用于显示抽奖结果的 `div` 和一个用于触发抽奖的按钮。
2. 在 CSS 中定义了容器和按钮的样式,以及抽奖结果框的样式。
3. 在 JavaScript 中定义了一个奖品列表 `prizes`,其中包含了所有的奖品名称。
4. 使用 `document.getElementById()` 方法获取 HTML 中的元素,存储在变量中。
5. 使用 `addEventListener()` 方法为按钮添加点击事件,当用户点击按钮时触发。
6. 在事件处理程序中,生成一个随机数,以随机选择一个奖品。
7. 将中奖结果显示在抽奖结果框中。
8. 使用 CSS 中定义的动画类 `animate` 播放动画效果,通过添加和移除 class 来实现。