moveToElementText使用案例

  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() 这两个函数的作用 和使用方法,仅供参考。

上一篇:黑客帝国代码雨


下一篇:HEAP CORRUPTION DETECTED 错误原因与解决