通过下面提供的参数与格式用html+jq来写一个网站需要简单样式要有结果显示出来返回格式： JSON请求方式： GET请求地址： httpyovoaccapikuaishouphp参数名称 参数类型 是否必填 备注内容--------------------------------------------------url String 必填
<!DOCTYPE html>
<html>
<head>
<title>快手解析</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
body {
font-family: Arial;
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
.container {
margin: 0 auto;
max-width: 800px;
}
.card {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px;
}
.card img {
border-radius: 5px;
margin-bottom: 10px;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.card h2 {
font-size: 24px;
margin-bottom: 10px;
text-align: center;
}
.card p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.card .music {
margin-top: 10px;
background-color: #f2f2f2;
padding: 10px;
border-radius: 5px;
display: flex;
align-items: center;
}
.card .music img {
border-radius: 50%;
margin-right: 10px;
width: 40px;
height: 40px;
object-fit: cover;
}
.card .music p {
font-size: 14px;
margin: 0;
}
</style>
</head>
<body>
<h1>快手解析</h1>
<div class="container">
<form>
<label for="url">请输入快手作品链接：</label>
<input type="text" id="url" name="url" required>
<button type="submit">解析</button>
</form>
<div class="result"></div>
</div>
<script>
$(document).ready(function(){
$('form').submit(function(e){
e.preventDefault();
var url = $('#url').val();
$.getJSON('http://y.ovoa.cc/api/kuaishou.php?url='+url, function(result){
if(result.code == 200){
var data = result.data;
var html = '<div class="card"><img src="'+data.cover+'"><h2>'+data.title+'</h2><p><img src="'+data.avatar+'" style="border-radius: 50%; width: 20px; height: 20px; object-fit: cover;"> '+data.author+'</p><p><a href="'+data.url+'" target="_blank">点击查看作品</a></p>';
if(data.music){
html += '<div class="music"><img src="'+data.music.musicAvatar+'"><p>'+data.music.musicName+' - '+data.music.musicBgm+'</p></div>';
}
html += '</div>';
$('.result').html(html);
}else{
$('.result').html('<p>'+result.msg+'</p>');
}
});
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bc4W 著作权归作者所有。请勿转载和采集!