1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="utf-8">
5 <meta name="robots" content="noindex">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <meta name="renderer" content="webkit">
8 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
9 <title>ChinaOBD2.com redirect</title>
10 <link rel="shortcut icon" href="https://staticoffice.chinaobd2.com/static/favicon.ico" type="image/x-icon">
11 <style>
12 body,
13 h1,
14 p {
15 margin: 0;
16 padding: 0;
17 }
18
19 a {
20 text-decoration: none;
21 }
22
23 button {
24 padding: 0;
25 font-family: inherit;
26 background: none;
27 border: none;
28 outline: none;
29 cursor: pointer;
30 }
31
32 html {
33 width: 100%;
34 height: 100%;
35 background-color: #eff2f5;
36 }
37
38 body {
39 padding-top: 100px;
40 color: #222;
41 font-size: 13px;
42 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
43 line-height: 1.5;
44 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
45 }
46
47 @media (max-width: 620px) {
48 body {
49 font-size: 15px;
50 }
51 }
52
53 .button {
54 display: inline-block;
55 padding: 10px 16px;
56 color: #fff;
57 font-size: 14px;
58 line-height: 1;
59 background-color: #0077d9;
60 border-radius: 3px;
61 }
62
63 @media (max-width: 620px) {
64 .button {
65 font-size: 16px;
66 }
67 }
68
69 .button:hover {
70 background-color: #0070cd;
71 }
72
73 .button:active {
74 background-color: #0077d9;
75 }
76
77 .link-button {
78 color: #105cb6;
79 font-size: 13px;
80 }
81
82 @media (max-width: 620px) {
83 .link-button {
84 font-size: 15px;
85 }
86 }
87
88 .logo,
89 .wrapper {
90 margin: auto;
91 padding-left: 30px;
92 padding-right: 30px;
93 max-width: 540px;
94 }
95
96 .wrapper {
97 padding-top: 25px;
98 padding-bottom: 25px;
99 background-color: #f7f7f7;
100 border: 1px solid #babbbc;
101 border-radius: 5px;
102 }
103
104 @media (max-width: 620px) {
105 .logo,
106 .wrapper {
107 margin: 0 10px;
108 }
109 }
110
111 h1 {
112 margin-bottom: 12px;
113 font-size: 16px;
114 font-weight: 700;
115 line-height: 1;
116 }
117
118 @media (max-width: 620px) {
119 h1 {
120 font-size: 18px;
121 }
122 }
123
124 .warning {
125 color: #c33;
126 }
127
128 .link {
129 margin-top: 12px;
130 word-wrap: normal;
131 white-space: nowrap;
132 overflow: hidden;
133 text-overflow: ellipsis;
134 cursor: pointer;
135 }
136
137 .link.is-expanded {
138 word-wrap: break-word;
139 white-space: normal;
140 }
141
142 .actions {
143 margin-top: 15px;
144 padding-top: 30px;
145 text-align: right;
146 border-top: 1px solid #d8d8d8;
147 }
148
149 .actions .link-button + .link-button {
150 margin-left: 30px;
151 }
152
153 .tip {
154 position: relative;
155 display: none;
156 margin-top: 30px;
157 padding-top: 18px;
158 color: #999;
159 text-align: left;
160 background: #f7f7f7;
161 border-top: 1px solid #d8d8d8;
162 opacity: 0;
163 transition: opacity .2s ease-out;
164 }
165
166 .tip.is-visible {
167 opacity: 1;
168 }
169
170 .tip:after, .tip:before {
171 position: absolute;
172 bottom: 100%;
173 right: 5em;
174 content: " ";
175 height: 0;
176 width: 0;
177 border: solid transparent;
178 pointer-events: none;
179 }
180
181 .tip:after {
182 margin-right: -6px;
183 border-color: rgba(247, 247, 247, 0);
184 border-bottom-color: #f7f7f7;
185 border-width: 6px;
186 }
187
188 .tip:before {
189 margin-right: -7px;
190 border-color: rgba(216, 216, 216, 0);
191 border-bottom-color: #d2d2d2;
192 border-width: 7px;
193 }
194 </style>
195 </head>
196 <body>
197 <div class="logo">
198 <a href="https://www.chinaobd2.com">
199 <img src="//static.chinaobd2.com/static/img/logo_black_trans.png"
200 srcset="//static.chinaobd2.com/static/img/logo_black_trans@2x.png 2x" alt="知乎">
201 </a>
202 </div>
203 <div class="wrapper">
204 <div class="content">
205 <h1>即将离开知乎</h1>
206 <p class="info">您即将离开知乎，请注意您的帐号和财产安全。</p>
207 <p class="link">https://www.chinaobd2.com/</p>
208 </div>
209 <div class="actions">
210 <a class="button" href="https://www.chinaobd2.com/">继续访问</a>
211 </div>
212 </div>
213 <script>
214 var showTipButton = document.querySelector('.js-show-tip');
215 var tipEl = document.querySelector('.tip');
216 var showTip = function () {
217 tipEl.style.display = 'block';
218 tipEl.offsetWidth; // force reflow
219 tipEl.className = 'tip is-visible';
220 return false;
221 };
222
223 var linkEl = document.querySelector('.link');
224 var selectLink = function () {
225 linkEl.className = 'link is-expanded';
226 if (document.body.createTextRange) {
227 range = document.body.createTextRange();
228 range.moveToElementText(linkEl);
229 range.select();
230 } else if (window.getSelection) {
231 selection = window.getSelection();
232 range = document.createRange();
233 range.selectNodeContents(linkEl);
234 selection.removeAllRanges();
235 selection.addRange(range);
236 }
237 ;
238 };
239
240 if (window.addEventListener) {
241 showTipButton.addEventListener('click', showTip);
242 linkEl.addEventListener('click', selectLink);
243 } else {
244 showTipButton.attachEvent('onclick', showTip);
245 linkEl.attachEvent('onclick', selectLink);
246 }
247 </script>
248 </body>
249 </html>
通过以上案例，我们可以比较清楚的知道 createTextRange(),moveToElementText() 这两个函数的作用 和使用方法，仅供参考。