pg7s85mrc
/
select_random
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update lottery.html

Browse Source
main
luoyonghuang 2 months ago
parent d9960ef64c
commit 2b465511d1
1 changed files with 200 additions and 135 deletions
Show Stats Download Patch File Download Diff File

335
lottery.html
Unescape View File

@ -1,135 +1,200 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖页面</title> <title>抽奖页面</title>
<style> <style>
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(135deg, #6e45e2, #88d3ce); background: linear-gradient(135deg, #6e45e2, #88d3ce);
color: white; color: white;
transition: background-color 0.5s ease; transition: background-color 0.5s ease;
} }
.container { .container {
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
opacity: 1; opacity: 1;
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
#pointsDisplay { #pointsDisplay {
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 20px; margin-bottom: 20px;
} }
button { button {
padding: 12px 30px; padding: 12px 30px;
font-size: 1.1em; font-size: 1.1em;
border: none; border: none;
border-radius: 50px; border-radius: 50px;
background-color: #ff5722; background-color: #ff5722;
color: white; color: white;
cursor: pointer; cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease;
margin: 10px; margin: 10px;
} }
button:hover { button:hover {
background-color: #ff3d00; background-color: #ff3d00;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
} }
#loading { #loading {
display: none; display: none;
font-size: 1.5em; font-size: 1.5em;
margin-top: 20px; margin-top: 20px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div id="pointsDisplay">当前积分: </div> <div id="pointsDisplay">当前积分: </div>
<button id="startLotteryButton">开始抽奖</button> <button id="startLotteryButton">开始抽奖</button>
<button class="back-button" id="backButton">返回前一页面</button> <button class="back-button" id="backButton">返回前一页面</button>
<div id="result"></div> <div id="result"></div>
<div id="loading">正在加载，请稍候...</div> <div id="loading">正在加载，请稍候...</div>
</div> </div>
<script> <script>
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
let name = urlParams.get('name'); let student_name = urlParams.get('student_name');
let student_id = urlParams.get('student_id');
// 如果 URL 中没有 name 参数，尝试从 localStorage 获取
if (!name) { const pointsDisplay = document.querySelector('#pointsDisplay');
name = localStorage.getItem('currentUserName'); const startLotteryButton = document.querySelector('#startLotteryButton');
} const resultDisplay = document.querySelector('#result');
const backButton = document.getElementById('backButton');
const pointsDisplay = document.querySelector('#pointsDisplay'); const loadingIndicator = document.getElementById('loading');
const startLotteryButton = document.querySelector('#startLotteryButton');
const resultDisplay = document.querySelector('#result'); // 睡眠函数，让页面跳转更自然
const backButton = document.getElementById('backButton'); function sleep(d) {
const loadingIndicator = document.getElementById('loading'); return new Promise(resolve => setTimeout(resolve, d));
}
// 睡眠函数，让页面跳转更自然
function sleep(d) { // 全局变量，用于存储用户积分
return new Promise(resolve => setTimeout(resolve, d)); let userPoints = null;
}
// 获取该用户的分数
// 获取该用户的积分 const fetchStudentScore = async (student_id) => {
let userPoints = parseInt(localStorage.getItem(name)) || 0; try {
pointsDisplay.textContent = `${name} 的当前积分: ${userPoints}`; const response = await fetch('http://localhost:3000/api/get-score', {
method: 'POST', // 使用 POST 方法
// 设置返回按钮的 URL headers: {
backButton.onclick = () => { 'Content-Type': 'application/json', // 设置请求体的内容类型
loadingIndicator.style.display = 'block'; // 显示加载提示 },
window.location.href = `choice.html?name=${encodeURIComponent(name)}`; body: JSON.stringify({ student_id }), // 将 student_id 放入请求体
}; });
// 抽奖逻辑 if (!response.ok) {
startLotteryButton.addEventListener('click', async () => { alert('分数获取失败');
if (userPoints >= 20) { return null; // 返回 null 表示获取失败
userPoints -= 20; // 每次抽奖消耗 20 分 }
localStorage.setItem(name, userPoints); // 保存更新后的积分
pointsDisplay.textContent = `${name} 的当前积分: ${userPoints}`; // 直接返回响应体中的数字
const data = await response.json(); // 直接解析为 JSON
// 随机选择奖品 const score = data.score;
const prizes = ["跳过权", "再来一次", "什么也没有发生", "加30积分且跳过"]; return score; // 返回数字
const randomPrize = prizes[Math.floor(Math.random() * prizes.length)]; } catch (error) {
resultDisplay.textContent = `你赢得了: ${randomPrize}`; alert('网络请求失败');
return null; // 返回 null 表示获取失败
// 等待 2 秒以展示结果 }
await sleep(2000); };
loadingIndicator.style.display = 'block'; // 显示加载提示
if (randomPrize === '跳过权') { // 更新用户分数
await sleep(1000); async function updateScore(student_id, points) {
window.location.href = `select.html?name=${encodeURIComponent(name)}`; try {
} else if (randomPrize === '再来一次') { const response = await fetch('http://localhost:3000/api/update-score', {
userPoints += 20; method: 'POST',
localStorage.setItem(name, userPoints); headers: {
} else if (randomPrize === '什么也没有发生') { 'Content-Type': 'application/json',
await sleep(1000); },
window.location.href = `answer.html?name=${encodeURIComponent(name)}`; body: JSON.stringify({ student_id, points }),
} else if (randomPrize === '加30积分且跳过') { });
userPoints += 30;
localStorage.setItem(name, userPoints); if (!response.ok) {
await sleep(1000); throw new Error('网络响应不正常');
window.location.href = `select.html?name=${encodeURIComponent(name)}`; }
}
} else { // 使用 text() 解析响应，得到字符串形式的分数
resultDisplay.textContent = "积分不足，无法抽奖！"; const data = await response.text();
loadingIndicator.style.display = 'block'; // 显示加载提示 let score = Number(data); // 转换为数字
await sleep(1000); return score; // 返回数字
window.location.href = `answer.html?name=${encodeURIComponent(name)}`; } catch (error) {
} console.error('分数更新失败:', error);
}); return null; // 返回 null 表示更新失败
</script> }
</body> }
</html>
// 初始化函数，用于设置用户积分
async function init() {
userPoints = await fetchStudentScore(student_id); // 获取分数并存储到全局变量
pointsDisplay.textContent = `${student_name} 的当前积分: ${userPoints}`;
}
// 执行初始化函数
init();
// 设置返回按钮的 URL
backButton.onclick = () => {
loadingIndicator.style.display = 'block'; // 显示加载提示
window.location.href = `choice.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
};
// 开始抽奖
startLotteryButton.addEventListener('click', async () => {
if (userPoints >= 2) {
userPoints = await updateScore(student_id, -2); // 积分-2
pointsDisplay.textContent = `${student_name} 的当前积分: ${userPoints}`;
// 随机选择奖品
const prizes = ["跳过权", "再来一次", "什么也没有发生", "加3积分且跳过"];
const randomPrize = prizes[Math.floor(Math.random() * prizes.length)];
resultDisplay.textContent = `你赢得了: ${randomPrize}`;
// 等待 2 秒以展示结果
await new Promise(resolve => setTimeout(resolve, 2000));
loadingIndicator.style.display = 'block'; // 显示加载提示
if (randomPrize === '跳过权') {
await sleep(2000);
window.location.href = `select.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
else if (randomPrize === '再来一次') {
userPoints = await updateScore(student_id, 2); // 积分返回2
await sleep(2000);
window.location.href = `lottery.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
else if (randomPrize === '什么也没有发生') {
await sleep(2000);
window.location.href = `answer.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
else if (randomPrize === '加3积分且跳过') {
userPoints = await updateScore(student_id, 3); // 积分+3
await sleep(2000);
window.location.href = `select.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
} else {
resultDisplay.textContent = "积分不足，无法抽奖！返回回答问题";
loadingIndicator.style.display = 'block'; // 显示加载提示
await sleep(2000);
window.location.href = `answer.html?student_name=${encodeURIComponent(student_name)}&student_id=${encodeURIComponent(student_id)}`;
}
});
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save