优化代码1 增加输入框的实时验证功能用户在输入链接时即时判断是否符合快手视频链接格式防止用户提交无效链接。2 将解析按钮修改为表单提交按钮以便利用浏览器默认验证功能提高用户体验。3 增加loading效果让用户在等待解析结果时有一个视觉提示。4 检查返回数据格式时增加对返回数据是否为空的判断。5 在解析成功后增加对解析结果数量的判断如果结果为空则在页面上显示没有找到相关视频。6 增加对视频格式的判
<p>优化后代码如下：</p>
<!DOCTYPE html>
<html>
<head>
<title>快手视频解析</title>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: #f8f8f8;
font-family: Arial, sans-serif;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-top: 0;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
input[type=text] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
width: 100%;
max-width: 600px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #49c8f0;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #37a1c2;
}
.result {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
width: 300px;
margin: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
cursor: pointer;
transition: transform 0.2s;
}
.card:hover {
transform: translateY(-5px);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card .info {
padding: 10px;
}
.card .info h3 {
margin-top: 0;
margin-bottom: 5px;
}
.card .info p {
margin: 0;
font-size: 14px;
color: #888;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.modal .content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
width: 100%;
max-height: 80%;
overflow-y: auto;
position: relative;
}
.modal .content .close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #888;
cursor: pointer;
}
.modal .content .title {
margin-top: 0;
margin-bottom: 10px;
font-size: 24px;
font-weight: bold;
text-align: center;
}
.modal .content .author {
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.modal .content .author img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.modal .content .author p {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.modal .content video {
width: 100%;
height: auto;
max-height: 80%;
margin-bottom: 10px;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.loading img {
width: 50px;
height: 50px;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<h1>快手视频解析</h1>
<form>
<label for="url">请输入快手视频链接：</label>
<input type="text" id="url" name="url" placeholder="例如：https://www.kuaishou.com/video/xxxxxxxxxxxx" onblur="validateUrl()">
<button type="submit" id="submit">解析</button>
</form>
<div class="result"></div>
</div>
<pre><code><div class="modal">
<div class="content">
<span class="close">&times;</span>
<h2 class="title"></h2>
<div class="author">
<img src="" alt="头像">
<p></p>
</div>
<video controls></video>
</div>
</div>
<div class="loading">
<img src="loading.gif" alt="加载中">
</div>
<script>
function validateUrl() {
var url = $('#url').val();
if (url && !/^https?:\/\/www\.kuaishou\.com\/video\/[a-zA-Z0-9]{12,}$/.test(url)) {
alert('请输入正确的快手视频链接！');
$('#url').val('').focus();
}
}
$(function () {
$('form').on('submit', function (event) {
event.preventDefault();
var url = $('#url').val();
if (url) {
if (!/^https?:\/\/www\.kuaishou\.com\/video\/[a-zA-Z0-9]{12,}$/.test(url)) {
alert('请输入正确的快手视频链接！');
$('#url').val('').focus();
return;
}
$('.loading').show();
$.ajax({
url: 'http://y.ovoa.cc/api/kuaishou.php',
type: 'GET',
data: {
url: url
},
dataType: 'json',
success: function (data) {
$('.loading').hide();
if (!data || typeof data !== 'object') {
alert('返回数据格式不正确');
return;
}
if (data.msg === '解析成功') {
var result = $('.result');
result.empty();
var items = data.data;
if (items.length > 0) {
$.each(items, function (index, item) {
var card = $('<div>').addClass('card');
var img = $('<img>').attr('src', item.cover);
var info = $('<div>').addClass('info');
var title = $('<h3>').text(item.title);
var author = $('<p>').text(item.author);
var avatar = $('<img>').attr('src', item.avatar).attr('alt', '头像');
info.append(title, author);
card.append(img, info);
result.append(card);
card.on('click', function () {
var videoUrl = item.url;
if (!/^https?:\/\/.*\.(mp4|avi|mov|wmv)$/.test(videoUrl)) {
alert('不支持的视频格式！');
return;
}
$('.modal .title').text(item.title);
$('.modal .author img').attr('src', item.avatar);
$('.modal .author p').text(item.author);
$('.modal video').attr('src', videoUrl);
$('.modal').show();
});
});
} else {
result.append($('<p>').text('没有找到相关视频'));
}
} else {
alert(data.msg);
}
},
error: function () {
$('.loading').hide();
alert('解析失败');
}
});
}
});
$('.modal .close').on('click', function () {
$('.
</code></pre>
原文地址: https://www.cveoy.top/t/topic/bc4a 著作权归作者所有。请勿转载和采集!