可以实现以下功能:

  1. 判断用户的浏览器类型是否为微信或QQ,如果是,则显示引导复制链接的提示信息。

  2. 点击提示信息中的“复制链接”按钮,将域名复制到用户的剪贴板中。

  3. 在复制成功后,显示一个提示信息告诉用户已经成功复制链接。

  4. 用户在浏览器中打开域名时,直接跳转到对应的网页。

以下是代码示例:

HTML代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>复制链接引导页面</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="clipboard.min.js"></script>
	<script src="script.js"></script>
</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>
</body>
</html>

CSS代码:

body {
	background-color: #eee;
	font-family: "Microsoft YaHei", sans-serif;
}

#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;
}

JavaScript代码:

$(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();
	}

	// 复制链接到剪贴板
	var clipboard = new ClipboardJS("#copy-btn", {
		text: function() {
			return $("#link-box").text();
		}
	});

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

	clipboard.on("error", function(e) {
		alert("复制失败,请手动复制链接!");
	});
});

说明:

  1. 在HTML代码中,我们使用了三个div分别代表了引导复制链接的提示信息、复制链接的提示信息和链接复制成功的提示信息。

  2. 在CSS代码中,我们设置了这三个div的样式。

  3. 在JavaScript代码中,我们使用了Clipboard.js库来实现复制链接到剪贴板的功能,使用了jQuery库来简化DOM操作。我们首先判断用户的浏览器类型,如果是微信或QQ,则显示引导复制链接的提示信息;如果是其他浏览器,则显示复制链接的提示信息。当用户点击复制链接按钮时,我们使用Clipboard.js库将链接复制到剪贴板中,并显示链接复制成功的提示信息。

  4. 在使用该代码时,需要将Clipboard.js库和相关的CSS文件和JavaScript文件导入到项目中,并将https://www.example.com替换为实际的域名。

如果把域名发送在微信或者QQ中引导用户复制链接到手机或者PC浏览器浏览如果用户正常用PC或者手机浏览器打开域名则正常打开域名用html+jq+css

原文地址: https://www.cveoy.top/t/topic/besN 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录