复制微信号并跳转到微信界面

最新推荐文章于 2024-07-30 14:43:10 发布

kingbow。

最新推荐文章于 2024-07-30 14:43:10 发布

阅读量3.7k

点赞数 2

分类专栏： JavaScript 文章标签：复制微信弹框

本文链接：https://blog.csdn.net/weixin_44384778/article/details/93085619

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

经常遇到需要写复制微信号并跳转到微信界面的功能，这里整理了两种样式，方便下次直接拿来使用。

    <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>
    
    
    第一种：点击后直接复制并跳转微信界面
    <div class="row">
         <div class="wx" onclick="copywx()">
             <a href="weixin://"><span id="copy_content">136xxxx6510</span>（微信同号）,复制跳转微信</a>
         </div>
    </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="txtcss">136xxxx6510</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';
        }
    </script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190620181710469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM4NDc3OA==,size_16,color_FFFFFF,t_70)