復制微信號並跳轉到微信界面


經常遇到需要寫復制微信號並跳轉到微信界面的功能,這里整理了兩種樣式,方便下次直接拿來使用。

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM