#该文本描述了一个名为“仙风道骨充值中心”的网页，提供用户充值游戏账户的功能。用户需要输入充值账号、确认账号、选择区服和支付方式，并可以选择固定金额或自定义金额进行充值。页面包含相关的样式和JavaScript代码，用于处理用户输入和提交表单。充值成功后，用户会收到相应的提示。
<!DOCTYPE html>
<html lang="zh-CN">
<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;
background-color: #1a3b5f;
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('背景图片地址'); /* 替换为您的背景图片 */
background-size: cover;
background-position: center;
}
.container {
background-color: rgba(0, 0, 0, 0.8);
padding: 30px;
border-radius: 10px;
width: 500px;
}
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
font-size: 14px;
}
input[type="text"], select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
background-color: #fff;
color: #000;
font-size: 16px;
}
.payment-methods {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.payment-methods button {
width: 48%;
padding: 10px;
background-color: #1f6cab;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
/* 设置选中时的颜色为深蓝色 */
.payment-methods button.selected {
background-color: #004b99;
}
.amount-options {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.amount-options button {
width: 18%;
padding: 10px;
background-color: #1f6cab;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
/* 设置选中时的颜色为深蓝色 */
.amount-options button.selected {
background-color: #004b99;
}
.custom-amount input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
background-color: #fff;
color: #000;
font-size: 16px;
}
.submit-btn {
width: 100%;
padding: 15px;
background-color: #0066cc;
color: white;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
text-align: center;
}
.submit-btn:hover {
background-color: #004b99;
}
.info {
font-size: 12px;
line-height: 1.5;
margin-top: 20px;
}
.info p {
margin: 0;
}
.footer {
text-align: center;
margin-top: 20px;
font-size: 12px;
}
/* 提示框样式 */
.message-box {
margin-top: 20px;
padding: 10px;
border-radius: 5px;
display: none;
}
.message-box.error {
background-color: #ff4d4d;
color: white;
}
.message-box.success {
background-color: #28a745;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>仙风道骨充值中心</h1>
<label for="account">充值账号:</label>
<input type="text" id="account" name="account" placeholder="充值账号">
<label for="confirm-account">确认账号:</label>
<input type="text" id="confirm-account" name="confirm-account" placeholder="确认账号">
<label for="server">选择区服:</label>
<select id="server" name="server">
<option value="">请选择区服</option>
<option value="1">区服1</option>
<option value="2">区服2</option>
</select>
<label for="payment">充值方式:</label>
<div class="payment-methods">
<button type="button" id="payment-alipay" onclick="selectPaymentMethod('支付宝')">支付宝</button>
<button type="button" id="payment-wechat" onclick="selectPaymentMethod('微信支付')">微信支付</button>
</div>
<label for="amount">充值金额:</label>
<div class="amount-options">
<button type="button" id="amount-100" onclick="selectAmount(100)">100</button>
<button type="button" id="amount-500" onclick="selectAmount(500)">500</button>
<button type="button" id="amount-1000" onclick="selectAmount(1000)">1000</button>
<button type="button" id="amount-5000" onclick="selectAmount(5000)">5000</button>
<button type="button" id="amount-10000" onclick="selectAmount(10000)">10000</button>
</div>
<div class="custom-amount">
<input type="text" id="custom-amount" name="custom-amount" placeholder="充值金额范围: 1-10000元" oninput="checkCustomAmount()">
</div>
<button class="submit-btn" onclick="submitForm()">立即充值</button>
<!-- 提示框 -->
<div id="message-box" class="message-box"></div>
<div class="info">
<p>充值说明:</p>
<p>1. 充值成功时，将在游戏内充值账户中显示充值成功的订单。</p>
<p>2. 充值时请确认账号是否正确，如何查看账号？</p>
<p>3. 请选择正确的游戏区服以便充值成功。</p>
<p>4. 充值成功后，如果遇到未到账或处理异常情况，请及时联系UV，以便更准确了解充值失败原因。</p>
</div>
<div class="footer">
版权所有 © 2024 某某科技有限公司 | 本站建议您在18岁以上玩家使用
</div>
</div>
<script>
let selectedPaymentMethod = '支付宝'; // 默认支付方式
let selectedAmount = 100; // 默认充值金额
// 设置默认选中的支付方式和金额
document.getElementById('payment-alipay').classList.add('selected');
document.getElementById('amount-100').classList.add('selected');
function selectPaymentMethod(method) {
selectedPaymentMethod = method;
// 移除所有按钮的选中状态
document.getElementById('payment-alipay').classList.remove('selected');
document.getElementById('payment-wechat').classList.remove('selected');
// 根据选择的支付方式添加选中状态
if (method === '支付宝') {
document.getElementById('payment-alipay').classList.add('selected');
} else if (method === '微信支付') {
document.getElementById('payment-wechat').classList.add('selected');
}
displayMessage('您选择的支付方式是: ' + method, 'success');
}
function selectAmount(amount) {
selectedAmount = amount;
// 移除所有金额按钮的选中状态
document.querySelectorAll('.amount-options button').forEach(button => {
button.classList.remove('selected');
});
// 根据选择的金额添加选中状态
document.getElementById(`amount-${amount}`).classList.add('selected');
document.getElementById('custom-amount').value = ''; // 清空自定义金额
displayMessage('您选择的金额是: ' + amount + '元', 'success');
}
function checkCustomAmount() {
const customAmount = document.getElementById('custom-amount').value;
const validAmounts = [100, 500, 1000, 5000, 10000];
// 移除所有金额按钮的选中状态
document.querySelectorAll('.amount-options button').forEach(button => {
button.classList.remove('selected');
});
// 检查自定义金额是否匹配预设金额
if (customAmount && validAmounts.includes(Number(customAmount))) {
document.getElementById(`amount-${customAmount}`).classList.add('selected');
selectedAmount = Number(customAmount);
displayMessage(`您输入的金额与 ${customAmount} 元匹配`, 'success');
} else {
selectedAmount = null;
displayMessage('自定义金额与预设金额不匹配', 'error');
}
}
function displayMessage(message, type) {
const messageBox = document.getElementById('message-box');
messageBox.className = 'message-box ' + type;
messageBox.innerText = message;
messageBox.style.display = 'block';
setTimeout(() => {
messageBox.style.display = 'none';
}, 3000); // 3秒后自动消失
}
function submitForm() {
const account = document.getElementById('account').value;
const confirmAccount = document.getElementById('confirm-account').value;
const server = document.getElementById('server').value;
const customAmount = document.getElementById('custom-amount').value;
// 验证表单数据
if (!account || !confirmAccount || !server || (!selectedAmount && !customAmount) || !selectedPaymentMethod) {
displayMessage('请完整填写所有信息！', 'error');
return;
}
if (account !== confirmAccount) {
displayMessage('账号和确认账号不一致！', 'error');
return;
}
const amount = customAmount || selectedAmount;
// 通过Ajax提交数据到后端
const xhr = new XMLHttpRequest();
xhr.open('POST', '/your-backend-url', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
displayMessage('充值成功！', 'success');
} else if (xhr.readyState === 4) {
displayMessage('充值失败，请稍后再试！', 'error');
}
};
const data = {
account: account,
server: server,
amount: amount,
paymentMethod: selectedPaymentMethod
};
xhr.send(JSON.stringify(data));
}
</script>
</body>
</html>
