<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择页面</title> <style> body { font-family: 'Arial', sans-serif; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #6e45e2, #88d3ce); color: white; } .container { text-align: center; background-color: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 15px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); } #nameDisplay { font-size: 2.5em; margin-bottom: 30px; } button { padding: 12px 30px; font-size: 1.1em; border: none; border-radius: 50px; background-color: #ff5722; color: white; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease, box-shadow 0.3s ease; margin: 10px; } button:hover { background-color: #ff3d00; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } </style> </head> <body> <div class="container"> <div id="nameDisplay">欢迎, </div> <button id="answerButton">老实回答问题</button> <button id="lotteryButton">消耗积分抽奖</button> </div> <script> // 获取URL中的参数(名字) const urlParams = new URLSearchParams(window.location.search); const name = urlParams.get('student_name'); const id = urlParams.get('student_id'); // 显示被抽中的名字 const nameDisplay = document.querySelector('#nameDisplay'); nameDisplay.textContent = ` ${name} 你的选择是:`; // 回答问题功能,跳转到回答问题页面 document.querySelector('#answerButton').addEventListener('click', () => { window.location.href = `answer.html?student_name=${encodeURIComponent(name)}&student_id=${encodeURIComponent(id)}`; }); // 抽奖功能,跳转到抽奖页面 document.querySelector('#lotteryButton').addEventListener('click', () => { window.location.href = `lottery.html?student_name=${encodeURIComponent(name)}&student_id=${encodeURIComponent(id)}`; }); </script> </body> </html>