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