日常小记

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

回复

This is just a placeholder img.