手机端微信号一键复制功能实现 - HTML5 代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
<title>手机端微信号一键复制功能实现</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.wechat-id {
font-size: 20px;
margin-bottom: 20px;
}
.copy-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #009688;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="wechat-id">微信号: <span id="wechat-id">your_wechat_id</span></div>
<button class="copy-btn" onclick="copyWeChatID()">复制</button>
</div>
<script>
function copyWeChatID() {
var weChatID = document.getElementById("wechat-id");
var tempInput = document.createElement("input");
tempInput.type = "text";
tempInput.value = weChatID.innerText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
alert("微信号已复制成功！");
}
</script>
</body>
</html>