以下是一个简单的
原神游戏
抽奖活动页面的实现，包括 HTML、CSS 和 JavaScript：
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
原神游戏
抽奖活动</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="title">
原神游戏
抽奖活动</h1>
<div class="lottery-box">
<div class="lottery-wheel"></div>
<div class="lottery-pointer"></div>
</div>
<button class="btn" id="draw-btn">点击
抽奖</button>
<div class="result" id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 40px;
text-align: center;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.title {
margin-bottom: 40px;
}
.lottery-box {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto 40px;
background-color: #ffebcd;
border-radius: 50%;
overflow: hidden;
}
.lottery-wheel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
height: 280px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.lottery-pointer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #f00;
cursor: pointer;
}
.btn {
display: block;
margin: 0 auto 20px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
background-color: #f00;
border: none;
border-radius: 5px;
cursor: pointer;
}
.result {
font-size: 24px;
font-weight: bold;
color: #f00;
}
```
JavaScript:
```js
const prizes = [
'角色 黄金周',
'角色 公子鸭',
'圣遗物 五连',
'圣遗物 四连',
'圣遗物 三连',
'圣遗物 二连',
'谢谢参与'
];
const btn = document.getElementById('draw-btn');
const resultEl = document.getElementById('result');
const wheel = document.querySelector('.lottery-wheel');
const pointer = document.querySelector('.lottery-pointer');
let isSpinning = false;
btn.addEventListener('click', () => {
if (isSpinning) return;
// 防止连续点击
isSpinning = true;
// 随机生成中奖结果
const rand = Math.floor(Math.random() * 100);
let prizeIndex;
if (rand < 5) {
prizeIndex = 0;
} else if (rand < 15) {
prizeIndex = 1;
} else if (rand < 35) {
prizeIndex = 2;
} else if (rand < 60) {
prizeIndex = 3;
} else if (rand < 85) {
prizeIndex = 4;
} else if (rand < 95) {
prizeIndex = 5;
} else {
prizeIndex = 6;
}
// 计算旋转角度
const angle = prizeIndex * 45 + 22.5;
// 开始旋转
wheel.style.transition = 'all 5s ease-out';
wheel.style.transform = `rotate(${angle}deg)`;
// 指针落在中奖区域
setTimeout(() => {
pointer.style.transition = 'all 0.5s ease-out';
pointer.style.transform = `translate(-50%, -50%) rotate(${angle + 45}deg)`;
}, 5000);
// 显示中奖结果
setTimeout(() => {
resultEl.innerText = `恭喜您获得了${prizes[prizeIndex]}！`;
isSpinning = false;
}, 6000);
});
```
以上代码实现了一个简单的
原神游戏
抽奖活动页面，包括一个
抽奖转盘和一个点击按钮，在点击按钮后将随机生成中奖结果并旋转转盘，最终指针落在中奖区域并显示中奖结果。
4284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
