复制链接引导页面 - 优化后的代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>复制链接引导页面</title>
	<style>
		body {
			background-color: #eee;
			font-family: 'Microsoft YaHei', sans-serif;
		}
<pre><code>	#copy-box {
		display: none;
		background-color: #f00;
		color: #fff;
		text-align: center;
		padding: 10px;
	}

	#tips-box {
		display: none;
		background-color: #fff;
		padding: 20px;
		box-shadow: 0 0 5px #999;
		margin: 20px auto;
		max-width: 80%;
	}

	#tips-box p {
		margin: 0 0 10px 0;
	}

	#link-box {
		background-color: #f5f5f5;
		padding: 10px;
		word-break: break-all;
		margin-bottom: 10px;
	}

	#copy-btn {
		background-color: #f00;
		color: #fff;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;
	}

	#success-box {
		display: none;
		background-color: #00f;
		color: #fff;
		text-align: center;
		padding: 10px;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div id="copy-box">
		<p>为了更好的体验，请使用浏览器打开本页面</p>
	</div>
	<div id="tips-box">
		<p>请复制以下链接到浏览器中打开：</p>
		<div id="link-box">https://www.example.com</div>
		<button id="copy-btn">复制链接</button>
	</div>
	<div id="success-box">
		<p>链接已成功复制到剪贴板，快去打开吧！</p>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
	<script>
		$(document).ready(function() {
			// 判断是否为微信或QQ浏览器
			var ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger" || ua.indexOf("qq/") > -1) {
				$('#copy-box').show();
			} else {
				$('#tips-box').show();
			}
<pre><code>		// 复制链接到剪贴板
		var clipboard = new ClipboardJS(&quot;#copy-btn&quot;, {
			text: function() {
				return $(&quot;#link-box&quot;).text();
			}
		});

		clipboard.on(&quot;success&quot;, function() {
			$('#tips-box').hide();
			$('#success-box').show();
		});

		clipboard.on(&quot;error&quot;, function(e) {
			alert(&quot;复制失败，请手动复制链接！&quot;);
		});
	});
&lt;/script&gt;
</code></pre>
</body>
</html>