clipboard实现循环微信号并点击复制,弹窗,右侧悬浮图片
先引进三个js
<script src="style/jquery.min.js"></script>
<script src="style/clipboard.min.js"></script>
<script src="style/layer.min.js"></script> //弹窗及右侧悬浮窗样式
样式文件夹需layer.css
//微信号数组
<script>
var stxlwx = "";
let wxarr = ['wechat'];
let random = Math.floor(Math.random() * wxarr.length);
stxlwx = wxarr[random];
var wx_img = "<img width='200px' class='wx_img' src='images/" + stxlwx + ".jpg'>";
</script>
//复制代码
<script>
var clipboard = new ClipboardJS('.btn', {
text: function () {
return stxlwx;
}
});
clipboard.on('success', function (e) {
layer.open({
title: [
'微信号:'+stxlwx+' 复制成功',
'background-color: #07B3E3; color:#fff;'
]
,content: '请打开微信点击右上角+选择“添加朋友”添加好友<br>若没有复制成功请长按复制<br><br><span style="font-size:24px">'+stxlwx+'</span>',btn: ['前往微信', '取消']
,yes: function(index){
window.location.href = "weixin://";
layer.close(index);
}
});
});
var clipboard1 = new ClipboardJS('.btn1', {
text: function () {
return stxlwx;
}
});
clipboard1.on('success', function (e) {
window.location.href = "weixin://"
});
$(".close").click(function () {
$(".diy-modal").css("display", "none")
});
$(".wx_str").html(stxlwx);
$(".wx_img").attr("src",);
</script>
//右侧悬浮代码
<div class="td-code" id="td-code"
style="width: 200px;background-color: #fff;border: 1px solid #d9dadc;position: fixed;top: 20%;padding: 5px;right: 10px;">
<script>document.write(wx_img)</script>
<p style="text-align: center;font-size:14px; text-indent:0;line-height: 20px;">
微信扫一扫<br/>添加微信
</p>
</div>
微信号调用需在标签中加入 class="wx_str"
点击复制需在标签中加入 class="btn"
1.zip