用html+jq+css代码写出post请求查询的页面带下面请求参数httpssvip-apicveoytopv3grants请求参数 keyssk-xxxxxxxxxxxx返回参数 keys sk-xxxx useAmount 25 今日已使用次数 activateTime 1681191668000 首次使用时间 在这个时间上添加5天 如果大于7200分钟 则会返回K
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Post请求查询页面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f2f2;
}
h1{
text-align: center;
margin-top: 50px;
}
form{
margin: 50px auto;
width: 50%;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
label{
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"]{
padding: 5px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
width: 100%;
margin-bottom: 20px;
}
input[type="submit"]{
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover{
background-color: #3e8e41;
}
.result{
margin: 50px auto;
width: 50%;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
display: none;
}
.result h2{
margin-top: 0px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.result p{
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Post请求查询页面</h1>
<form id="queryForm">
<label for="keys">keys：</label>
<input type="text" id="keys" name="keys" placeholder="请输入keys">
<input type="submit" value="查询">
</form>
<div class="result">
<h2>查询结果</h2>
<p>keys：</p>
<p>今日已使用次数：</p>
<p>首次使用时间：</p>
</div>
<script>
$(function(){
$("#queryForm").submit(function(event){
event.preventDefault(); //阻止表单提交
var keys = $("#keys").val(); //获取keys
$.post("https://svip-api.cveoy.top/v3/grants", {"keys": keys}, function(data){
$(".result").show();
$(".result p:eq(0)").append(data.keys);
$(".result p:eq(1)").append(data.useAmount);
var activateTime = new Date(parseInt(data.activateTime));
var expireTime = new Date(activateTime.getTime() + 5*24*60*60*1000); //添加5天
var nowTime = new Date();
if((nowTime.getTime() - activateTime.getTime())/1000/60 > 7200){ //大于7200分钟
$(".result p:eq(2)").append("Key已到期!");
}else{
$(".result p:eq(2)").append(expireTime.toLocaleString());
}
}, "json");
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bKjF 著作权归作者所有。请勿转载和采集!