写一个卡密购买的页面系统页面要求居中背景淡蓝色尽量美对接的支付宝支付支付成功后页面开始插入1个新的卡密分为2天5元、10天16元、30天30元到数据库然后再页面展示给用户卡密并提供复制按钮语句为$sql = INSERT INTO cardh id card expire days VALUES 0 $card $expire $days;已经有了conphp封装数据库链接化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>卡密购买</title>
<style>
body {
background-color: #f0f8ff;
}
.center {
margin: auto;
width: 50%;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="radio"], input[type="submit"] {
margin: 10px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #66c2ff;
color: #fff;
cursor: pointer;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
input[type="radio"]:checked {
background-color: #ff9933;
}
.card {
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
text-align: center;
}
.copy {
margin: 10px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #66c2ff;
color: #fff;
cursor: pointer;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="center">
<h1>卡密购买</h1>
<form id="form" action="pay.php" method="post">
<label><input type="radio" name="days" value="2"> 2天 5元</label>
<label><input type="radio" name="days" value="10"> 10天 16元</label>
<label><input type="radio" name="days" value="30"> 30天 30元</label>
<input type="submit" value="立即购买">
</form>
<div id="card" class="card" style="display: none;"></div>
<button id="copy" class="copy" style="display: none;">复制卡密</button>
</div>
<script>
const form = document.getElementById("form");
const card = document.getElementById("card");
const copy = document.getElementById("copy");
<pre><code> form.addEventListener("submit", function(event) {
event.preventDefault();
const xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (response.success) {
card.style.display = "block";
card.innerHTML = "卡密：" + response.card;
copy.style.display = "block";
copy.addEventListener("click", function() {
navigator.clipboard.writeText(response.card)
.then(() => {
alert("卡密已复制到剪贴板");
})
.catch(() => {
alert("复制失败，请手动复制");
});
});
} else {
alert(response.message);
}
}
};
xhr.send(new FormData(form));
});
</script>
</code></pre>
</body>
</html>
<?php
include "con.php";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$days = $_POST["days"];
$price = 0;
$expire = date("Y-m-d H:i:s", strtotime("+{$days} days"));
$card = generateCard();
switch ($days) {
case "2":
$price = 5;
break;
case "10":
$price = 16;
break;
case "30":
$price = 30;
break;
default:
die(json_encode(array("success" => false, "message" => "参数错误")));
}
$sql = "INSERT INTO cardh (id, card, expire, days) VALUES ('0', '$card', '$expire', '$days')";
if (mysqli_query($con, $sql)) {
die(json_encode(array("success" => true, "card" => $card)));
} else {
die(json_encode(array("success" => false, "message" => "数据库错误")));
}
}
function generateCard($length = 16) {
$characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
$card = "";
for ($i = 0; $i < $length; $i++) {
$card .= $characters[mt_rand(0, strlen($characters) - 1)];
}
return $card;
}
?>
原文地址: https://www.cveoy.top/t/topic/bgaw 著作权归作者所有。请勿转载和采集!