帮我写一个年会抽奖小程序
时间: 2024-10-11 22:16:07 浏览: 16
创建一个简单的年会抽奖小程序可以分为以下几个步骤,这里以JavaScript为例,假设我们使用的是HTML5和CSS3:
1. **项目结构**:
- 创建一个基本文件夹结构,包含index.html、styles.css 和 script.js 文件。
2. **HTML** (index.html):
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>年会抽奖</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>年会抽奖</h1>
<div id="prize-draw-container">
<button id="start-draw">开始抽奖</button>
<ul id="winners-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
```
3. **CSS** (styles.css) (简化的样式):
```css
body {
font-family: Arial, sans-serif;
}
#prize-draw-container {
margin: 50px auto;
}
```
4. **JavaScript** (script.js):
```javascript
document.addEventListener('DOMContentLoaded', function () {
const startDrawButton = document.getElementById('start-draw');
const winnersList = document.getElementById('winners-list');
startDrawButton.addEventListener('click', function() {
// 假设奖品列表是一个数组,存储每个员工ID
const prizes = ['001', '002', '003', ...]; // 需要填充实际奖品
// 生成随机数并选择获奖者
const randomIndex = Math.floor(Math.random() * prizes.length);
const winner = prizes[randomIndex];
// 添加获奖者到列表
winnersList.innerHTML += `<li>恭喜 ${winner} 获得奖品!</li>`;
});
});
```
阅读全文