盲盒抽奖前端页面代码
时间: 2024-07-16 07:01:07 浏览: 132
盲盒抽奖的前端页面代码通常涉及到HTML、CSS和JavaScript,因为这涉及到用户界面交互和动态内容展示。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>盲盒抽奖</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入样式文件 -->
</head>
<body>
<div class="blind-box-container">
<h2>盲盒抽奖</h2>
<button id="lottery-btn">开始抽奖</button>
<div id="result-container"></div>
</div>
<script src="scripts.js"> <!-- 引入JavaScript文件 -->
</script>
</body>
</html>
```
```css
/* styles.css */
.blind-box-container {
text-align: center;
margin-top: 50px;
}
.lottery-btn {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
.result-container {
margin-top: 20px;
font-size: 20px;
display: none; /* 初始隐藏结果 */
}
```
```javascript
// scripts.js
document.getElementById('lottery-btn').addEventListener('click', function() {
// 假设这是一个随机选择奖项的方法
const prize = drawPrize();
document.getElementById('result-container').textContent = `恭喜您抽到了:${prize}`;
document.getElementById('result-container').style.display = 'block'; // 展示结果
});
function drawPrize() {
// 这里模拟从数组中随机选择盲盒奖品
var prizes = ['神秘礼物A', '普通礼物B', '稀有礼物C'];
return prizes[Math.floor(Math.random() * prizes.length)];
}
```