No Description

liedou_college.html 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  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{
  11. width: 100%;
  12. min-height: 100vh;
  13. background: url(image/bgLiedou_college.jpg) #2f3141 no-repeat;
  14. background-size:100%;
  15. padding-top: 5.3rem;
  16. box-sizing: border-box;
  17. }
  18. img{
  19. width: 100%;
  20. }
  21. .buttonCopy{
  22. background: #FFC320;
  23. width: 2rem;
  24. height: 0.4rem;
  25. border-radius: 0.4rem;
  26. text-align: center;
  27. line-height: 0.4rem;
  28. color: #000;
  29. font-size: 0.2rem;
  30. margin: auto;
  31. }
  32. .ewm{
  33. margin-top: 0.17rem;
  34. }
  35. .ewm img{
  36. width: 1.36rem;
  37. height: 1.36rem;
  38. margin: auto;
  39. }
  40. .ewm .hint{
  41. color: #ffffff;
  42. font-size: 0.16rem;
  43. margin-top: 0.07rem;
  44. margin-bottom: 0.17rem;
  45. text-align: center;
  46. }
  47. #copy_1,#copy_2{
  48. position: absolute;
  49. left: -1000rem;
  50. }
  51. .alert-info {
  52. position: fixed;
  53. top: 3rem;
  54. right: 0;
  55. left: 0;
  56. bottom: 0;
  57. text-align: center;
  58. }
  59. .alert-info p {
  60. display: inline-block;
  61. height: 0.38rem;
  62. color: #fff;
  63. font-size: 0.14rem;
  64. line-height: 0.38rem;
  65. padding: 0 0.10rem;
  66. background-color: rgba(0, 0, 0, 0.7);
  67. border-radius: 5px;
  68. }
  69. </style>
  70. <script>
  71. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  72. window.onresize = function(){
  73. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  74. }
  75. </script>
  76. </head>
  77. <body>
  78. <input id="copy_1" type="text" readOnly="true" value=""/>
  79. <div id="copy_2"></div>
  80. <div class="buttonCopy" onclick="copyEvent()">复制微信号</div>
  81. <div class="ewm">
  82. <img src="image/bgLiedoe_college_button.png" />
  83. <div class="hint">添加客服 进群听课</div>
  84. </div>
  85. <div class="alert-info" style="display: none;">
  86. <!-- tip提示,3s后消失 -->
  87. <p></p>
  88. </div>
  89. </body>
  90. </html>
  91. <script>
  92. function copyEvent () {
  93. var data='zhuaduoduo001';
  94. copy_2.innerHTML = data;
  95. copy_1.value = data;
  96. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  97. //区分iPhone设备
  98. window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
  99. var Url2=document.getElementById("copy_2");//要复制文字的节点
  100. var range = document.createRange();
  101. // 选中需要复制的节点
  102. range.selectNode(Url2);
  103. // 执行选中元素
  104. window.getSelection().addRange(range);
  105. // 执行 copy 操作
  106. var successful = document.execCommand('copy');
  107. // 移除选中的元素
  108. window.getSelection().removeAllRanges();
  109. }else{
  110. var Url2=document.getElementById("copy_1");//要复制文字的节点
  111. Url2.select(); // 选择对象
  112. document.execCommand("Copy"); // 执行浏览器复制命令
  113. }
  114. showMsg('微信号已复制')//toast
  115. }
  116. function showMsg(msg) {
  117. var msgBox = document.getElementsByClassName('alert-info')[0];
  118. msgBox.children[0].innerText = msg;
  119. msgBox.style.display="block";
  120. setTimeout(function() {
  121. msgBox.style.display="none";
  122. }, 1500);
  123. }
  124. </script>