之前写过一篇复制微信号并跳转微信的示例,对于固定的一个微信号是可以使用的,但是不能满足多个微信号随机显示并复制跳转的问题。这里补充一下示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机显示微信号,并复制跳转微信</title>
</head>
<style>
a:link{
text-decoration:none;}/* 指正常的未被访问过的链接*/
a:visited{
text-decoration:none;}/*指已经访问过的链接*/
a:hover{
text-decoration:none;}/*指鼠标在链接*/
a:active{
text-decoration:none;}/* 指正在点的链接*/
.wx{
width: 90%;
margin-left: 5%;
font-size: 18px;
color:white;
text-align: center;
background-color: #ff7f2e;
border-radius: 5px;
line-height: 40px;
}
.wx a{
font-size: 18px;
color:white;
}
/*弹窗*/
.tan{
width:80%;
height:180px;
background-color:#e8e8e8;
position:fixed;
left:10%;
top:40%;
display:none;
z-index: 200;
}
.kuang{
height:120px;
text-align:center;
padding: 20px 0;
}
.txtcss{
color:red;
font-weight:800;
font-size:20px;
}
.copy{
font-size: 16px;
float: left;
background-color: #5AD700;
padding: 5px 20px;
margin-left: 25%;color: black;
border-radius: 5px;
}
.copy a{
color: white;}
.guanbi{
width:20px;
height:20px;
color:red;
margin-top:-130px;
}
</style>
<body>
<div class="row">
张三的微信号是<span onclick="showwx()" class="copy_content txtcss"></span>,(点击微信号复制)
</div>
<div class="row">
张三的微信号是<span onclick="showwx()" class="copy_content txtcss"></span>,(点击微信号复制)
</div>
<div class="row">
<div class="wx" onclick="showwx()">添加微信了解更多</div>
</div>
<!--弹窗-->
<div id='myshow' class="tan">
<div class="kuang">
咨询学费<br/>
了解更多<br/>
请添加微信:<br/>
<span id="copy_content" class="copy_content txtcss"></span>
</div>
<div style="height: 10px;"></div>
<p onclick="copywx()" class="copy"><a href="weixin://">复制并跳转微信</a></p>
<div onclick="closeshow()" class="closeshow pull-right guanbi">x</div>
</div>
<script>
/*点击复制微信号*/
function copywx(){
const range = document.createRange();
range.selectNode(document.getElementById('copy_content'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制成功!");
}
/*点击出现弹框*/
function showwx(){
var ss=document.getElementById('myshow');
ss.style.display='block';
}
/*关闭弹窗*/
function closeshow(){
var ss=document.getElementById('myshow');
ss.style.display='none';
}
/*微信号数组*/
var arr_wx=['微信1','微信2','微信3'];
var index=0;
//进入页面每隔一定时间随机显示微信号
function change(){
var copy_content=document.getElementsByClassName('copy_content');
index=Math.floor(Math.random()*arr_wx.length);
for(var i=0;i<copy_content.length;i++){
copy_content[i].innerText=arr_wx[index];
}
}
change();
setInterval('change()',1000*60);
</script>
</body>
</html>
效果如下,样式可以自己调整