1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>checkout</title>
8 <style>
9 .stream-discount {
10 word-spacing: 0;
11 letter-spacing: 0;
12 width: 100%;
13 height: 100%;
14 position: fixed;
15 top: 0;
16 left: 0;
17 z-index: 1000000001;
18 background-color: rgba(0,0,0,0.75);
19 }
20 .main{
21 position: relative;
22 width: 70vw;
23 top: 50%;
24 left: 50%;
25 transform: translate(-50%,-50%);
26 }
27 .main .img{
28 width: 100%;
29 }
30 .main .close-btn{
31 position: absolute;
32 right: 0;
33 top: 0;
34 width: 60px;
35 height: 60px;
36 text-align: center;
37 line-height: 60px;
38 color: #fff;
39 font-size: 30px;
40 font-weight: bold;
41 }
42 </style>
43 </head>
44 <body>
45 <h1>我是checkout</h1>
46 <form action="./checkout.html" id="form">
47 <input type="text" id="name" name="name" placeholder="姓名">
48 <button type="submit"> 提交 </button>
49 </form>
50 <script>
51 s = function() {
52 window.history.pushState(Object.assign(window.history.state || {}, {
53 key: "his-push-01"
54 }), "", "#1")
55 }
56 m = function() {
57 return null !== navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|HUAWEI)/i) ? "MOBILE" : "PC"
58 }
59 T = function() {
60 var e = document.createElement("div");
61 if (e.setAttribute("class", "stream-discount"),
62 e.innerHTML = `<div class="main">
63 <div class="close-btn">×</div>
64 <img src="https://imgs.prettysan.com/uploads/public/62f/b71/246/62fb712460125692912600.jpg?x-oss-process=image%2Fformat%2Cwebp" alt="" style="width:100%;height: calc(1.07 * 70vw);">
65 </div>
66 `,
67 !document.querySelector(".stream-discount")) {
68 document.body.appendChild(e),
69 document.body.classList.add("stream-modal-show"),
70 sessionStorage.setItem("stream-checkout-discount", "stream-checkout-discount");
71
72 document.querySelector(".close-btn").addEventListener("click", (function() {
73 var t, e = document.querySelector(".close-btn").classList.contains("step-2") ? 2 : 1;
74 document.querySelector(".stream-discount .main").style.cssText = "top: -100%; opacity: 0;",
75 setTimeout((function() {
76 document.querySelector(".stream-discount").remove(),
77 t && t()
78 }
79 ), 250),
80 document.body.classList.remove("stream-modal-show")
81 }
82 ))
83 }
84 }
85 M = function() {
86 var t = sessionStorage.getItem("stream-checkout-discount");
87 if (t)
88 return !1;
89 if ("PC" === m()) {
90 document.documentElement.addEventListener("mouseleave", (function t(e) {
91 e.clientY <= 20 && (T(),
92 document.documentElement.removeEventListener("mouseleave", t))
93 }
94 ))
95 } else
96 s(),
97 window.streamIntercept = function() {
98 T(),
99 window.removeEventListener("popstate", window.streamIntercept)
100 }
101 ,
102 window.addEventListener("popstate", window.streamIntercept)
103
104 };
105
106 var C = function(t, e, n) {
107 if ("FBIOS" == (navigator.userAgent.indexOf("FB") > -1 && navigator.userAgent.indexOf("iOS") > -1 ? "FBIOS" : "ORTHER"))
108 !function(t, e, n) {
109 var o, r, i, a, c, s;
110 t && e && (window.scrollTo(0, 5),
111 document.addEventListener("touchstart", (function(t) {
112 o = t.touches[0].clientX,
113 r = t.touches[0].clientY
114 }
115 )),
116 document.addEventListener("touchend", (function(t) {
117 var e = document.body.scrollTop || document.documentElement.scrollTop;
118 i = t.changedTouches[0].clientX,
119 a = t.changedTouches[0].clientY,
120 c = i - o,
121 (s = a - r) > 14 && Math.abs(s) > Math.abs(c) && e <= 0 && (E(n)
122 )}
123 )))
124 }(t, e, n);
125 else {
126 var o = 0;
127 t && e && (s(),
128 window.streamIntercept = function() {
129 1 === ++o ? (E(n),
130 s()) : 2 === o ? O(n) : (window.removeEventListener("popstate", window.streamIntercept),
131 history.go(-1))
132 }
133 ,
134 window.addEventListener("popstate", window.streamIntercept))
135 }
136 }
137
138 var o = {
139 action_log: 2,
140 discount_value: 0,
141 ga: "",
142 intercept: 2,
143 intercept_log: 2
144 }
145 var t = 1 === o.intercept_log,
146 e = 1 === o.intercept,
147 n = Math.abs(o.discount_value);
148 C(t, e, n)
149 M();
150 </script>
151 </body>
152 </html>
View Code
标签：返回,function,querySelector,stream,discount,&&,document,监听,物理 From： https://www.cnblogs.com/chengjunL/p/16914931.html