No Description

index.html 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <title>联系我们</title>
  8. <link rel="stylesheet" type="text/css" href="../public/public_css.css"/>
  9. <style type="text/css">
  10. body{min-height:100vh;}
  11. .we{}
  12. .we ul{padding: 0 0.36rem;padding-top: 0.88rem;padding-bottom: 0.68rem;}
  13. .we ul li{height: 0.3rem;margin-bottom: 0.24rem;}
  14. .we ul li img{float:left;width: 0.3rem;height: 0.3rem;}
  15. .we ul li .item{float: left;color: #333333;font-size: 0.16rem;line-height: 0.3rem;padding-left:0.1rem;padding-right: 0.17rem;}
  16. .we ul li .copy{float: right;width:0.42rem;height:0.16rem;border-radius:0.1rem;border:0.01rem solid #999999; font-size: 0.1rem ;line-height: 0.16rem;text-align: center;margin-top: 0.07rem;box-sizing: border-box;}
  17. #copy_1,#copy_2{position: absolute;left: -1000rem;}
  18. .alert-info {position: absolute;top: 1.74rem; right: 0; left: 0;bottom: 0; text-align: center;z-index: 99;}
  19. .alert-info p {display: inline-block;height: 0.38rem;color: #fff;font-size: 0.14rem;line-height: 0.38rem;padding: 0 0.10rem;background-color: rgba(0, 0, 0, 0.7);border-radius: 5px;}
  20. .liedou img{width: 0.64rem;margin: auto;margin-bottom: 0.14rem;}
  21. .liedou p{font-size: 0.14rem; padding-bottom: 0.05rem;line-height: 0.18rem;text-align: center;}
  22. </style>
  23. <script type="text/javascript">
  24. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  25. window.onresize = function(){
  26. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <div class="we">
  32. <ul>
  33. <li>
  34. <img src="images/qq.png"/>
  35. <div class="item">客服&nbsp;QQ:<span id="info1">373910640</span></div>
  36. <p class="copy" onclick="copyPassword('1'),showMsg()">复制</p>
  37. </li>
  38. <li>
  39. <img src="images/vx.png"/>
  40. <div class="item">客服微信:<span id="info2">15110211863</span></div>
  41. <p class="copy" onclick="copyPassword('2'),showMsg()">复制</p>
  42. </li>
  43. <li>
  44. <img src="images/tel.png"/>
  45. <div class="item">客服手机:<span id="info3">13511074691</span></div>
  46. <p class="copy" onclick="copyPassword('3'),showMsg()">复制</p>
  47. </li>
  48. </ul>
  49. <div class="liedou">
  50. <img src="images/liedou.png" alt="" />
  51. <p>选得对 赚得多</p>
  52. <p>www.liedou.com</p>
  53. </div>
  54. </div>
  55. <input id="copy_1" type="text" readOnly="true" value=""/>
  56. <div id="copy_2"></div>
  57. <div class="alert-info" style="display: none;">
  58. <!-- tip提示,2s后消失 -->
  59. <p></p>
  60. </div>
  61. </body>
  62. </html>
  63. <script type="text/javascript" src="../public/jquery-2.1.0.js"></script>
  64. <script type="text/javascript">
  65. function showMsg() {
  66. var msg = "复制成功";
  67. var msgBox = $('.alert-info');
  68. msgBox.children('p').text(msg);
  69. msgBox.show();
  70. setTimeout(function() {
  71. msgBox.hide();
  72. }, 2000);
  73. }
  74. function copyPassword(i) {
  75. var data1=document.getElementById("info1").innerHTML;
  76. var data2=document.getElementById("info2").innerHTML;
  77. var data3=document.getElementById("info3").innerHTML;
  78. if(i =='1'){
  79. copy_2.innerHTML = data1;
  80. copy_1.value = data1;
  81. }else if(i == '2'){
  82. copy_2.innerHTML = data2;
  83. copy_1.value = data2;
  84. }
  85. else if(i == '3'){
  86. copy_2.innerHTML = data3;
  87. copy_1.value = data3;
  88. }
  89. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  90. //区分iPhone设备
  91. window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
  92. var Url2=document.getElementById("copy_2");//要复制文字的节点
  93. var range = document.createRange();
  94. // 选中需要复制的节点
  95. range.selectNode(Url2);
  96. // 执行选中元素
  97. window.getSelection().addRange(range);
  98. // 执行 copy 操作
  99. var successful = document.execCommand('copy');
  100. // 移除选中的元素
  101. window.getSelection().removeAllRanges();
  102. }else{
  103. var Url2=document.getElementById("copy_1");//要复制文字的节点
  104. Url2.select(); // 选择对象
  105. document.execCommand("Copy"); // 执行浏览器复制命令
  106. }
  107. }
  108. </script>