使用html+jq+css按下面提供的接口 参数 写个查询页面与现实出来接口：httpssvip-apicveoytopv3grants请求参数 keyssk-xxxxxxxxxxxx返回参数 keys sk-xxxx useAmount 25 今日已使用次数 activateTime 1681191668000 首次使用时间 在这个时间上添加5天 如果大于7200分钟
<!DOCTYPE html>
<html>
<head>
<title>查询页面</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body{
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.title{
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.input-container{
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.label{
font-size: 18px;
margin-right: 10px;
}
.input{
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: none;
outline: none;
box-shadow: 0px 0px 5px #ccc;
}
.btn{
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 0px 5px #ccc;
}
.result-container{
display: none;
flex-direction: column;
align-items: center;
margin-top: 20px;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 5px #ccc;
}
.result{
font-size: 18px;
margin-bottom: 10px;
}
.error{
color: red;
font-size: 18px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">查询页面</div>
<div class="input-container">
<div class="label">Key:</div>
<input type="text" class="input" id="keyInput">
</div>
<button class="btn" id="queryBtn">查询</button>
<div class="result-container" id="resultContainer">
<div class="result" id="useAmount"></div>
<div class="result" id="activateTime"></div>
<div class="error" id="error"></div>
</div>
</div>
<script>
$(document).ready(function(){
$("#queryBtn").click(function(){
var key = $("#keyInput").val();
if(key == ""){
$("#error").text("请输入Key");
$("#resultContainer").hide();
}else{
$.ajax({
url: "https://svip-api.cveoy.top/v3/grants",
type: "POST",
dataType: "json",
data: {
keys: key
},
success: function(data){
if(data.activateTime > 7200000){
$("#error").text("Key已到期!");
$("#resultContainer").hide();
}else{
$("#useAmount").text("今日已使用次数：" + data.useAmount);
var date = new Date(parseInt(data.activateTime) + 5*24*60*60*1000);
$("#activateTime").text("首次使用时间：" + date.toLocaleString());
$("#error").text("");
$("#resultContainer").show();
}
},
error: function(){
$("#error").text("查询失败，请稍后再试");
$("#resultContainer").hide();
}
});
}
});
});
</script>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bJ8M 著作权归作者所有。请勿转载和采集!