説明なし

11-redEnvelopes.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  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>双11全球狂欢节红包</title>
  8. <link rel="stylesheet" type="text/css" href="public.css"/>
  9. <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
  10. <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1277653001'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s5.cnzz.com/z_stat.php%3Fid%3D1277653001' type='text/javascript'%3E%3C/script%3E"));</script>
  11. <script type="text/javascript">
  12. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  13. window.onresize = function(){
  14. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  15. }
  16. document.getElementById("cnzz_stat_icon_1277653001").style.display="none"; // 隐藏统计小图标
  17. //声明_czc对象:
  18. var _czc = _czc || [];
  19. //绑定siteid,请用您的siteid替换下方"XXXXXXXX"部分
  20. _czc.push(["_setAccount", "1277653001"]);
  21. </script>
  22. <style type="text/css">
  23. body{width: 100%;height: 100vh;background: #fff;}
  24. .container{width: 100%;min-height: 100vh;background: url(img-618/11_bg.png) no-repeat;background-size:100% ;}
  25. .button{
  26. display: block;width: 2.2rem;height: .8rem;background: url(img-618/buttonBack.png) no-repeat;background-size: 100%;position: absolute;left: 0;right: 0;top: 4.6rem;margin: auto;
  27. }
  28. .shadbox {
  29. width: 2.1rem;height: .48rem;position: absolute;top: 0;left: .05rem;border-radius: .3rem;z-index: 1;overflow: hidden;
  30. }
  31. .shadowImg {display: inline-block; width: .33rem;height: 100%;position: absolute;left: 0;top: 0;transform: translate(0,0);
  32. animation: move 2.4s infinite;}
  33. .text {
  34. width: 1.22rem;
  35. height: .34rem;
  36. position: relative;
  37. z-index: 2;
  38. margin-left: .25rem;
  39. margin-top: -.24rem;
  40. background-image: url(img-618/text.png);
  41. background-size: 100% 100%;
  42. }
  43. .go {
  44. width: .57rem;
  45. height: .58rem;
  46. background-image: url(img-618/goBtn.png);
  47. background-size: 100% 100%;
  48. position: absolute;
  49. top: -.17rem;
  50. right: .1rem;
  51. z-index: 2;
  52. animation: scale 1s infinite;
  53. }
  54. .con{
  55. width: 77%;
  56. position: absolute;
  57. top: 5.6rem;
  58. left: 0;
  59. right: 0;
  60. margin: auto;
  61. font-size: 0.13rem;
  62. line-height: 0.2rem;
  63. color: #333;
  64. min-height: 1.5rem;
  65. }
  66. .con .copyButton{
  67. width: 2rem;
  68. height: .42rem;
  69. background: url(img-618/copy.png) no-repeat;
  70. background-size:auto 100%;
  71. color: #fff;
  72. display: block;
  73. margin: 0.2rem auto 0;
  74. font-size: 0.14rem;
  75. border-radius: 0.3rem;
  76. }
  77. .hint{
  78. display: block;
  79. min-height: 0.6rem;
  80. }
  81. .hint02{
  82. text-align: center;
  83. padding: 0.2rem 0;
  84. color: #9604af;
  85. }
  86. #copy_1,#copy_2,#taokouling{
  87. position: absolute;
  88. left: -1000rem;
  89. }
  90. .alert-info {
  91. position: fixed;
  92. top: 4rem;
  93. right: 0;
  94. left: 0;
  95. bottom: 0;
  96. z-index: 4;
  97. text-align: center;
  98. }
  99. .alert-info p {
  100. display: inline-block;
  101. height: 0.38rem;
  102. color: #fff;
  103. font-size: 0.16rem;
  104. line-height: 0.38rem;
  105. padding: 0 0.10rem;
  106. background-color: rgba(0, 0, 0, 0.7);
  107. border-radius: 5px;
  108. }
  109. .toast {
  110. display: none;
  111. width: 3.2rem;
  112. height: 3.3rem;
  113. position: fixed;
  114. top: 50%;
  115. left: 50%;
  116. transform: translate(-50%,-50%);
  117. z-index: 4;
  118. }
  119. .toastImg {
  120. display: inline-block;
  121. width: 100%;
  122. }
  123. .tkl {
  124. width: 2.4rem;
  125. position: absolute;
  126. top: 1.2rem;
  127. left: 50%;
  128. transform: translate(-50%,0);
  129. color: #090909;
  130. font-family: "PingFang SC,Microsoft YaHei,SourceHanSansCN-Normal,HiraginoSansGB,HiraginoSans-W3,Helvetica Neue,Helvetica,STHeiTi,sans-serif";
  131. }
  132. .btn {
  133. width: 1.8rem;
  134. height: .5rem;
  135. position: absolute;
  136. top: 2.4rem;
  137. left: 50%;
  138. transform: translate(-50%,0);
  139. }
  140. .main {
  141. display: none;
  142. width: 100%;
  143. height: 100%;
  144. position: fixed;
  145. top: 0;
  146. left: 0;
  147. z-index: 3;
  148. background: rgba(0,0,0,.4);
  149. }
  150. @keyframes scale {
  151. 0% {transform: scale(1.2);}
  152. 50% {transform: scale(1);}
  153. 100% {transform: scale(1.2);}
  154. }
  155. @keyframes move {
  156. 0% {transform: translate(0,0);}
  157. 100% {transform: translate(2.1rem,0);}
  158. }
  159. @keyframes move1 {
  160. 0% {transform: translate(-.22rem,0);}
  161. 100% {transform: translate(2.1rem,0);}
  162. }
  163. </style>
  164. </head>
  165. <body>
  166. <div class="container">
  167. <input id="copy_1" type="text" readOnly="true" value=""/>
  168. <div id="copy_2"></div>
  169. <text id="taokouling"></text>
  170. <button class="button" onclick="toTaobao()">
  171. <div class="text"></div>
  172. <div class="go"></div>
  173. <div class="shadbox">
  174. <img class="shadowImg" src="./img-618/shadow.png" alt="">
  175. </div>
  176. </button>
  177. <div class="con">
  178. <p class="hint">双11全球狂欢节--疯狂开趴购不停。超级红包来敲门,每天三次机会,考验手气的时刻抢就对了,还有超多惊喜等你来,复制淘口令</p>
  179. <button class="copyButton" onclick="showToast()"></button>
  180. </div>
  181. </div>
  182. <div class="alert-info" style="display: none;">
  183. <!-- tip提示,3s后消失 -->
  184. <p></p>
  185. </div>
  186. <div class="main"></div>
  187. <div class="toast">
  188. <img class="toastImg" src="./img-618/toast.png" alt="">
  189. <p class="tkl"></p>
  190. <div class="btn" onclick="copyPassword()"></div>
  191. </div>
  192. </body>
  193. </html>
  194. <script type="text/javascript">
  195. var token=''
  196. var tbUrl='',source = null
  197. var qs = parseQueryString(window.location.href);
  198. $().ready(function () {
  199. getToken()
  200. _czc.push(["_trackEvent",'2020-11-11','猎豆','页面加载']); //埋点
  201. })
  202. // 获取token
  203. function getToken() {
  204. var param = {
  205. "js_callback" : "callbackLogin"
  206. };
  207. param = JSON.stringify(param)
  208. try {
  209. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  210. window.webkit.messageHandlers.app_h5_login.postMessage(param);
  211. }
  212. if (navigator.userAgent.match(/android/i)) {
  213. obj4H5.app_h5_isLogin(param);
  214. }
  215. } catch (e) {
  216. // token='4f422467a11afa2cedaa593686f9b1d4257657'
  217. // todayTbkPassword()
  218. }
  219. }
  220. function callbackLogin(data) {//app token 回调
  221. var data = JSON.parse(data); //上线时添加
  222. if (navigator.userAgent.match(/android/i)&&!data.isLogin) {
  223. obj4H5.app_h5_login(JSON.stringify({
  224. "js_callback" : "callbackLogin"
  225. }));
  226. return false;
  227. }else {
  228. token=data.token; //上线时添加
  229. if(token) {
  230. todayTbkPassword()
  231. }
  232. }
  233. }
  234. //获取淘口令
  235. function todayTbkPassword(type) {
  236. if(token) {
  237. $.ajax({
  238. type: "get",
  239. url: "/api/v2/act_main_618",
  240. typeData: 'json',
  241. headers:{
  242. token:token
  243. },
  244. success: function (res) {
  245. if (res && res.errno == 0) {
  246. var tkl=res.rst.data.taoToken
  247. tbUrl=res.rst.data.m_url
  248. $(".tkl").text(tkl);
  249. $("#taokouling").text(tkl);
  250. }else {
  251. showMsg(res.err)
  252. }
  253. }
  254. });
  255. }else {
  256. getToken();
  257. }
  258. }
  259. function showToast() {
  260. $(".toast").show();
  261. $(".main").show();
  262. $("body").attr("style","overflow:hidden;")
  263. if(!$("#taokouling").text()) {
  264. todayTbkPassword();
  265. }
  266. }
  267. // 复制文字
  268. function copyPassword() {
  269. if(token) {
  270. var data = document.getElementById("taokouling").innerHTML;
  271. copy_2.innerHTML = data;
  272. copy_1.value = data;
  273. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  274. //区分iPhone设备
  275. window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
  276. var Url2 = document.getElementById("copy_2");//要复制文字的节点
  277. var range = document.createRange();
  278. // 选中需要复制的节点
  279. range.selectNode(Url2);
  280. // 执行选中元素
  281. window.getSelection().addRange(range);
  282. // 执行 copy 操作
  283. var successful = document.execCommand('copy');
  284. // 移除选中的元素
  285. window.getSelection().removeAllRanges();
  286. } else {
  287. var Url2 = document.getElementById("copy_1");//要复制文字的节点
  288. Url2.select(); // 选择对象
  289. document.execCommand("Copy"); // 执行浏览器复制命令
  290. }
  291. showMsg('复制成功')
  292. _czc.push(["_trackEvent",'2020-11-11','猎豆','复制淘口令']); //埋点
  293. }else {
  294. getToken();
  295. }
  296. }
  297. $(".btn").on("click",function(){
  298. $(".toast").hide();
  299. $(".main").hide();
  300. $("body").attr("style","")
  301. })
  302. // 打开淘宝
  303. function toTaobao() {
  304. _czc.push(["_trackEvent",'2020-11-11','猎豆','页面跳转']); //埋点
  305. if(token&&tbUrl) {
  306. var param = {
  307. "taobaoUrl" : tbUrl,//淘宝链接
  308. }
  309. param = JSON.stringify(param)
  310. try {
  311. if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
  312. window.webkit.messageHandlers.app_h5_open_taobao_url.postMessage(param);
  313. }
  314. if(navigator.userAgent.match(/android/i)){
  315. obj4H5.app_h5_open_taobao_url(param);
  316. }
  317. } catch (error) {
  318. }
  319. }else {
  320. getToken()
  321. }
  322. }
  323. function showMsg(msg) {
  324. //弹框
  325. var msgBox = document.getElementsByClassName('alert-info')[0];
  326. msgBox.children[0].innerText = msg;
  327. msgBox.style.display="block";
  328. setTimeout(function() {
  329. msgBox.style.display="none";
  330. }, 1500);
  331. }
  332. //获取地址栏参数
  333. function parseQueryString(url) {
  334. var urlObj = {};
  335. var reg = /([^?=&]+)=([^?=&]+)/g;
  336. url.replace(reg, function($0, $1, $2) {
  337. urlObj[$1] = decodeURIComponent($2);
  338. })
  339. return urlObj;
  340. }
  341. </script>