清除按钮应该在解析按钮下面并且与解析框有间距复制链接按钮应该是解析完成后出现了解析后的链接才显示出来如果在解析过程中不小心点击了清除按钮后在重新解析就完全失效了需要改成清除功能只是重置功能需要完整版代码HTML代码：!DOCTYPE htmlhtmlhead title视频解析title meta charset=utf-8 meta name=viewport content=width=dev

完整版代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>视频解析</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<div class="container">
		<h1>解析视频链接</h1>
		<div class="form-group">
			<label for="url">输入视频链接：</label>
			<input type="text" id="url" name="url" class="input" placeholder="请输入视频链接">
			<button id="clear" class="btn btn-secondary">清除</button>
		</div>
		<button id="submit" class="btn btn-primary">解析</button>
		<div class="result">
			<p><strong>解析中，请稍等<span class="dots">...</span></strong></p>
		</div>
		<div class="actions">
			<button id="copy" class="btn btn-secondary" style="display: none;">复制链接</button>
		</div>
	</div>
</body>
</html>

CSS样式：

.container {
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f1f1f1;
	border-radius: 10px;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

h1 {
	text-align: center;
	margin-bottom: 30px;
	color: #333;
}

.form-group {
	margin-bottom: 20px;
	position: relative;
}

label {
	display: block;
	margin-bottom: 5px;
	color: #333;
}

.input {
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 5px;
	background-color: #e1e1e1;
	font-size: 16px;
	color: #333;
}

.btn {
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	background-color: #007bff;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

.btn:hover {
	background-color: #0069d9;
}

.btn-secondary {
	background-color: #6c757d;
}

.btn-secondary:hover {
	background-color: #5a6268;
}

.result {
	margin-top: 30px;
	padding: 20px;
	border-radius: 5px;
	display: none;
	background-color: #fff;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);
	max-width: 100%;
	word-break: break-all;
	position: relative;
}

.result p {
	margin-bottom: 10px;
}

.result a {
	color: #007bff;
}

.dots {
	animation: blink 1.2s infinite;
}

.actions {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

@keyframes blink {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

JavaScript代码：

$(document).ready(function() {
  $('#submit').click(function() {
    var url = $('#url').val().trim();
    if (url == '') {
      alert('请输入视频链接');
      return false;
    } else if (!isValidUrl(url)) {
      alert('请输入有效的视频链接');
      return false;
    }
    var api_url = 'https://ovoa.cc/api/Tencent_live.php?url=' + url;
    $('.result').html('<p><strong>解析中，请稍等<span class="dots">...</span></strong></p>').show();
    $('#copy').hide();
    $.get(api_url, function(data) {
      if (data.code == 200) {
        $('.result').html('<p><strong>解析结果：</strong></p><p><a href="' + data.url + '">' + data.url + '</a></p>');
        $('#copy').show();
      } else {
        $('.result').html('<p><strong>解析失败：</strong>' + data.msg + '</p>');
      }
    }).fail(function() {
      $('.result').html('<p><strong>请求失败：</strong>请稍后再试</p>');
    });
    $(this).prop('disabled', true);
  });

  $('#clear').click(function() {
    $('#url').val('');
    $('.result').hide();
    $('#copy').hide();
  });

  $('#copy').click(function() {
    var url = $('.result a').attr('href');
    if (url) {
      navigator.clipboard.writeText(url);
    }
  });

  function isValidUrl(url) {
    var pattern = /^(http|https):\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,}(\/\S*)?$/;
    return pattern.test(url);
  }

  if (!navigator.clipboard) {
    $('#copy').prop('disabled', true);
  }
});

清除按钮应该在解析按钮下面并且与解析框有间距复制链接按钮应该是解析完成后出现了解析后的链接才显示出来如果在解析过程中不小心点击了清除按钮后在重新解析就完全失效了需要改成清除功能只是重置功能需要完整版代码HTML代码：!DOCTYPE htmlhtmlhead title视频解析title meta charset=utf-8 meta name=viewport content=width=dev