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