写一个卡密购买的页面系统对接的支付宝支付支付成功后页面开始插入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>
<title>卡密购买</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #f2f9ff;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
form {
margin-top: 30px;
}
label {
display: inline-block;
width: 150px;
text-align: right;
margin-right: 20px;
}
input[type="radio"] {
margin-right: 10px;
}
button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #3f84e5;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.card {
margin-top: 30px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
text-align: center;
display: none;
}
.copy {
margin-top: 20px;
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #3f84e5;
color: #fff;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>卡密购买</h1>
<form id="form">
<div>
<label for="days5">5元/2天</label>
<input type="radio" id="days5" name="days" value="2" checked>
</div>
<div>
<label for="days16">16元/10天</label>
<input type="radio" id="days16" name="days" value="10">
</div>
<div>
<label for="days30">30元/30天</label>
<input type="radio" id="days30" name="days" value="30">
</div>
<button type="submit">立即购买</button>
</form>
<div class="card" id="card">
<h2>您的卡密为：</h2>
<p id="card-text"></p>
<button class="copy" id="copy">复制</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
$(function() {
$('#form').submit(function(e) {
e.preventDefault();
var days = $('input[name="days"]:checked').val();
var price = 0;
switch (days) {
case '2':
price = 5;
break;
case '10':
price = 16;
break;
case '30':
price = 30;
break;
default:
break;
}
// 调用支付宝支付接口，此处省略
// ...
// 支付成功后生成卡密并插入到数据库
var card = generateCard();
var expire = getExpireDate(days);
$.ajax({
url: 'insert.php',
type: 'POST',
data: {card: card, expire: expire, days: days},
dataType: 'json',
success: function(data) {
if (data.status == 'success') {
// 展示卡密并提供复制按钮
$('#card-text').text(card);
$('#card').show();
var clipboard = new ClipboardJS('#copy');
clipboard.on('success', function(e) {
alert('已复制卡密到剪贴板');
});
} else {
alert('生成卡密失败，请稍后再试');
}
},
error: function() {
alert('网络错误，请稍后再试');
}
});
});
<pre><code> function generateCard() {
var card = '';
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
for (var i = 0; i < 16; i++) {
card += chars.charAt(Math.floor(Math.random() * chars.length));
}
return card;
}
function getExpireDate(days) {
var nowDate = new Date();
var expireDate = new Date(nowDate.getTime() + days * 24 * 60 * 60 * 1000);
var year = expireDate.getFullYear();
var month = expireDate.getMonth() + 1;
var day = expireDate.getDate();
return year + '-' + padZero(month) + '-' + padZero(day);
}
function padZero(num) {
return num < 10 ? '0' + num : num;
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bf9z 著作权归作者所有。请勿转载和采集!