标签：none 界面 color 微信 跳转 复制 text

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

    <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://www.icode9.com/i/ll/?i=20190620181710469.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM4NDc3OA==,size_16,color_FFFFFF,t_70)

标签：none,界面,color,微信,跳转,复制,text
来源： https://blog.csdn.net/weixin_44384778/article/details/93085619

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。