随机显示微信号，并复制跳转微信

一只胡萝卜

于 2020-04-23 11:05:05 发布

阅读量5.5k

点赞数 2

分类专栏：前端累积文章标签：随机显示微信号复制并跳转微信号随机显示微信号并跳转微信 js javascript

本文链接：https://blog.csdn.net/qq_36129701/article/details/105702250

版权

前端累积专栏收录该内容

5 篇文章 0 订阅

订阅专栏

之前写过一篇复制微信号并跳转微信的示例，对于固定的一个微信号是可以使用的，但是不能满足多个微信号随机显示并复制跳转的问题。这里补充一下示例。

<!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>