-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path可能这辈子都记不住了.html
624 lines (460 loc) · 47.7 KB
/
可能这辈子都记不住了.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可能这辈子都记不住了-Over the mountains, mountains. | 空脑壳</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" type="image/x-icon" href="https://myblog-static.oss-cn-beijing.aliyuncs.com/favor-icon/mylogo.png">
<meta name="keywords" content="雷雷雷,空脑壳,前端,HTML,CSS,JS,生活" />
<meta name="google-site-verification" content="pTRbturh_lAK5OIXLwAO7OKRMaEgSX2MtqqFrk1AMRM" />
<meta name="baidu-site-verification" content="vyp41u64K8" />
<meta name="description" content="一些琐碎记不住的东西">
<meta property="og:type" content="article">
<meta property="og:title" content="可能这辈子都记不住了">
<meta property="og:url" content="http://hi.thisisray.me/可能这辈子都记不住了.html">
<meta property="og:site_name" content="空脑壳">
<meta property="og:description" content="一些琐碎记不住的东西">
<meta property="og:locale" content="en">
<meta property="og:image" content="https://myblog-static.oss-cn-beijing.aliyuncs.com/post-imgs/%E9%97%AA%E5%BF%B5%E8%83%B6%E5%9B%8A/%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BC%98%E5%85%88%E7%BA%A7.png?x-oss-process=style/blogImg-watermark">
<meta property="og:image" content="https://myblog-static.oss-cn-beijing.aliyuncs.com/post-imgs/%E9%97%AA%E5%BF%B5%E8%83%B6%E5%9B%8A/%2B%2Bi%26i%2B%2B.png?x-oss-process=style/blogImg-watermark">
<meta property="og:updated_time" content="2018-10-08T03:26:35.144Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="可能这辈子都记不住了">
<meta name="twitter:description" content="一些琐碎记不住的东西">
<meta name="twitter:image" content="https://myblog-static.oss-cn-beijing.aliyuncs.com/post-imgs/%E9%97%AA%E5%BF%B5%E8%83%B6%E5%9B%8A/%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BC%98%E5%85%88%E7%BA%A7.png?x-oss-process=style/blogImg-watermark">
<link rel="alternate" href="/atom.xml" title="空脑壳" type="application/atom+xml">
<link rel="apple-touch-icon" href="/https://myblog-static.oss-cn-beijing.aliyuncs.com/favor-icon/avatar.jpg">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Montserrat:700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic" rel="stylesheet" type="text/css">
<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
@font-face{font-family:futura-pt;src:url(https://use.typekit.net/af/9749f0/00000000000000000001008f/27/l?subset_id=2&fvd=n5) format("woff2");font-weight:500;font-style:normal;}
@font-face{font-family:futura-pt;src:url(https://use.typekit.net/af/90cf9f/000000000000000000010091/27/l?subset_id=2&fvd=n7) format("woff2");font-weight:500;font-style:normal;}
@font-face{font-family:futura-pt;src:url(https://use.typekit.net/af/8a5494/000000000000000000013365/27/l?subset_id=2&fvd=n4) format("woff2");font-weight:lighter;font-style:normal;}
@font-face{font-family:futura-pt;src:url(https://use.typekit.net/af/d337d8/000000000000000000010095/27/l?subset_id=2&fvd=i4) format("woff2");font-weight:400;font-style:italic;}</style>
<link rel="stylesheet" href="/css/style.css">
<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/bootstrap.js"></script>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="/css/bootstrap.css" >
<link rel="stylesheet" href="/css/dialog.css">
<link rel="stylesheet" href="/css/header-post.css" >
<link rel="stylesheet" href="/css/vdonate.css" >
</head>
<body data-spy="scroll" data-target="#toc" data-offset="50">
<div id="container">
<div id="wrap">
<header>
<div id="allheader" class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" style="
margin-top: 0px;"
href="#" data-toggle="modal" data-target="#myModal" >
<img width="124px" height="124px" alt="Hike News" src="https://myblog-static.oss-cn-beijing.aliyuncs.com/favor-icon/avatar.jpg">
</a>
<div class="navbar-collapse collapse">
<ul class="hnav navbar-nav">
<li> <a class="main-nav-link" href="/">Home</a> </li>
<li> <a class="main-nav-link" href="/archives">Archives</a> </li>
<li> <a class="main-nav-link" href="/categories">Categories</a> </li>
<li> <a class="main-nav-link" href="/tags">Tags</a> </li>
<li><div id="search-form-wrap">
<form class="search-form">
<input type="text" class="ins-search-input search-form-input" placeholder="" />
<button type="submit" class="search-form-submit"></button>
</form>
<div class="ins-search">
<div class="ins-search-mask"></div>
<div class="ins-search-container">
<div class="ins-input-wrapper">
<input type="text" class="ins-search-input" placeholder="Type something..." />
<span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
</div>
<div class="ins-section-wrapper">
<div class="ins-section-container"></div>
</div>
</div>
</div>
<script>
(function (window) {
var INSIGHT_CONFIG = {
TRANSLATION: {
POSTS: 'Posts',
PAGES: 'Pages',
CATEGORIES: 'Categories',
TAGS: 'Tags',
UNTITLED: '(Untitled)',
},
ROOT_URL: '/',
CONTENT_URL: '/content.json',
};
window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>
</div></li>
</div>
</div>
</div>
</div>
</header>
<div id="content" class="outer">
<section id="main" style="float:none;"><article id="post-可能这辈子都记不住了" style="width: 75%; float:left;" class="article article-type-post article-home-false" itemscope itemprop="blogPost" >
<div id="articleInner" class="article-inner">
<header class="article-header">
<h1 class="thumb" class="article-title" itemprop="name">
可能这辈子都记不住了
</h1>
</header>
<div class="article-meta">
<a href="/可能这辈子都记不住了.html" class="article-date">
<time datetime="2017-08-02T06:56:32.000Z" itemprop="datePublished">2017-08-02</time>
</a>
<a class="article-category-link" href="/categories/烂笔头/">烂笔头</a>
</div>
<div class="article-count">
<div class="count-wrapper">
<span class="post-count">本文共 2,130 字</span>
<span class="post-count">预计花费 9 分钟</span>
</div>
</div>
<div class="article-entry" itemprop="articleBody">
<blockquote>
<p>一些琐碎记不住的东西</p>
</blockquote>
<a id="more"></a>
<h2 id="逗号运算符"><a href="#逗号运算符" class="headerlink" title="逗号运算符"></a>逗号运算符</h2><p>表达形式： 表达式1，表达式2 … 表达式n<br>求解过程： 先计算表达式1，在计算表达式2，以此类推。<br>最终的值为表达式n的值</p>
<p><img src="https://myblog-static.oss-cn-beijing.aliyuncs.com/post-imgs/%E9%97%AA%E5%BF%B5%E8%83%B6%E5%9B%8A/%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BC%98%E5%85%88%E7%BA%A7.png?x-oss-process=style/blogImg-watermark" alt="运算符优先级"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> count = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> count === <span class="string">"number"</span>); <span class="comment">// true , 这个不用解释了</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(!!<span class="keyword">typeof</span> count === <span class="string">"number"</span>); <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里涉及到就是优先级和布尔值的问题</span></span><br><span class="line"><span class="comment">// typeof count 就是字符串"number"</span></span><br><span class="line"><span class="comment">// !!是转为布尔值(三目运算符的变种),非空字符串布尔值为 true</span></span><br><span class="line"><span class="comment">// 最后才=== 比较 , true === "number" , return false</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">x = <span class="number">8</span>*<span class="number">2</span>,x*<span class="number">4</span></span><br><span class="line"><span class="comment">// 先计算 8*2 再赋值给 x 最后计算表达式结果为 64 x最终值为 16</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">(x=<span class="number">8</span>*<span class="number">2</span>,x*<span class="number">4</span>),x*<span class="number">2</span></span><br><span class="line"><span class="comment">// 先赋值 x=16 再逗号得64 ，最后外层逗号得整个表达式的值为32， x最终为16</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">x=(z=<span class="number">5</span>,<span class="number">5</span>*<span class="number">2</span>) <span class="comment">/*整个表达式为赋值表达式，它的值为10，z的值为5*/</span></span><br><span class="line">x=z=<span class="number">5</span>,<span class="number">5</span>*<span class="number">2</span> <span class="comment">/*整个表达式为逗号表达式，它的值为10，x和z的值都为5*/</span></span><br></pre></td></tr></table></figure>
<h2 id="带命名空间的事件-namespaced-events"><a href="#带命名空间的事件-namespaced-events" class="headerlink" title="带命名空间的事件(namespaced events)"></a>带命名空间的事件(namespaced events)</h2><p><code>on()</code>事件的第一个参数是事件的类型，可以通过<code>click.[name]</code>的方式对事件加标识以方便后期移除特定事件。代码如下：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'a'</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//Handler 1</span></span><br><span class="line">});</span><br><span class="line">$(<span class="string">'a'</span>).on(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//Handler 2</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">$(<span class="string">'a'</span>).off(<span class="string">'click'</span>) 会将两个移除</span><br></pre></td></tr></table></figure></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'a'</span>).on(<span class="string">'click.namespace1'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//Handler 1</span></span><br><span class="line">});</span><br><span class="line">$(<span class="string">'a'</span>).on(<span class="string">'click.namespace2'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//Handler 2</span></span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">$(<span class="string">'a'</span>).off(<span class="string">'click.namespace2'</span>);</span><br></pre></td></tr></table></figure>
<p>只移除名叫<code>namespace2</code>的点击事件</p>
<h2 id="几个测试题"><a href="#几个测试题" class="headerlink" title="几个测试题"></a>几个测试题</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">[] == [] <span class="comment">// fasle</span></span><br><span class="line"><span class="number">5</span> ==<span class="string">'5'</span> <span class="comment">// true</span></span><br><span class="line"><span class="number">5</span> === <span class="string">'5'</span> <span class="comment">// fale</span></span><br><span class="line"><span class="number">5</span> / <span class="number">0</span> <span class="comment">// Infinity</span></span><br><span class="line">+<span class="keyword">new</span> <span class="built_in">Date</span>() <span class="comment">//</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(!(<span class="string">"a"</span> <span class="keyword">in</span> <span class="built_in">window</span>)){</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这里是因为 var a 变量声明提升，导致判断一直为 false 不进分支。所以结果为 undefined</span></span><br></pre></td></tr></table></figure>
<h2 id="this"><a href="#this" class="headerlink" title="this"></a>this</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.age = <span class="number">0</span>; <span class="comment">// 指向实例化的对象</span></span><br><span class="line"> setInterval(<span class="function"><span class="keyword">function</span> <span class="title">growup</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">this</span>.age++; <span class="comment">// 指向 window</span></span><br><span class="line"> }, <span class="number">1000</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> Person();</span><br></pre></td></tr></table></figure>
<h2 id="typeof-null-39-object-39-的原理"><a href="#typeof-null-39-object-39-的原理" class="headerlink" title="typeof(null) === 'object' 的原理"></a><code>typeof(null) === 'object'</code> 的原理</h2><p>不同对象在底层都为二进制，在 JS 中前三位都为 0 的话就会被判定为 <code>object</code>，<code>null</code> 的二进制都是 0。</p>
<h2 id="Javascript-类型"><a href="#Javascript-类型" class="headerlink" title="Javascript 类型"></a>Javascript 类型</h2><p><strong>主类型(6)</strong>: <code>null</code>, <code>undefined</code>, <code>boolean</code>, <code>number</code>, <code>string</code>, <code>object</code></p>
<p><strong>object 子类型(9)</strong>：<code>String</code>, <code>Number</code>, <code>Function</code>, <code>Boolean</code>,<code>Array</code>, <code>Date</code> <code>Object</code>, <code>RegExp</code>, <code>Error</code></p>
<h2 id="https-请求方式"><a href="#https-请求方式" class="headerlink" title="https 请求方式"></a>https 请求方式</h2><p><code>options</code>, <code>head</code>, <code>put</code>, <code>delete</code>, <code>get</code>, <code>get</code>, <code>post</code>, <code>trace</code>, <code>connect</code></p>
<h2 id="阻止表单提交"><a href="#阻止表单提交" class="headerlink" title="阻止表单提交"></a>阻止表单提交</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">form.addEventListener(<span class="string">"submit"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> event = event || <span class="built_in">window</span>.event;</span><br><span class="line"> event.preventDefault();</span><br><span class="line"> <span class="built_in">window</span>.event.returnValue = <span class="literal">false</span>; <span class="comment">// IE 6 ~ 8</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<p><code>jQuery</code>实现：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 取消表单提交动作，防止事件冒泡</span></span><br><span class="line">$(form).on(<span class="string">'submit'</span>, <span class="literal">false</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 仅取消默认动作</span></span><br><span class="line">$(form).on(<span class="string">'submit'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{</span><br><span class="line"> event.preventDefault();</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">// 防止事件冒泡，但不禁止提交行为</span></span><br><span class="line">$(form).on(<span class="string">'submit'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{</span><br><span class="line"> event.stopPropagation();</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="禁用-input-记忆性输入"><a href="#禁用-input-记忆性输入" class="headerlink" title="禁用 input 记忆性输入"></a>禁用 <code>input</code> 记忆性输入</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">IE: <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">autocomplete</span> = <span class="string">"off"</span>></span></span><br><span class="line">Firefox: <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">disableautocomplete</span>=<span class="string">"off"</span>></span></span><br><span class="line">若Firefox方式对chrome无效，则在 <span class="tag"><<span class="name">form</span>></span> 上统一设置 autocompelet = "off"</span><br></pre></td></tr></table></figure>
<h2 id="jQuery-事件委托"><a href="#jQuery-事件委托" class="headerlink" title="jQuery 事件委托"></a><code>jQuery</code> 事件委托</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'body'</span>).on(<span class="string">'click'</span>, <span class="string">'div'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log($(<span class="keyword">this</span>).text());</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<h2 id="快速生成时间戳"><a href="#快速生成时间戳" class="headerlink" title="快速生成时间戳"></a>快速生成时间戳</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> current = +<span class="keyword">new</span> <span class="built_in">Date</span>();</span><br></pre></td></tr></table></figure>
<h2 id="跨-iframe-获取元素"><a href="#跨-iframe-获取元素" class="headerlink" title="跨 iframe 获取元素"></a>跨 <code>iframe</code> 获取元素</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'子元素'</span>, <span class="string">'父元素'</span>)</span><br></pre></td></tr></table></figure>
<p><code>window.parent.document</code> 包含当前窗口的父窗口</p>
<h2 id="Document-readyState-文档加载状态"><a href="#Document-readyState-文档加载状态" class="headerlink" title="Document.readyState 文档加载状态"></a><code>Document.readyState</code> 文档加载状态</h2><p>value:</p>
<ul>
<li><p><code>loading</code>/ 加载中 => <code>document</code> 仍在加载中</p>
</li>
<li><p><code>interactive</code> / 互动 => <code>document</code> 已被加载和解析，但 <code>image</code>, <code>CSS</code>, <code>Javascript</code> 仍在加载中。 <strong>此阶段会触发 <code>DomContentLoaded</code> 事件</strong></p>
</li>
<li><p><code>compete</code> / 完成 => <code>document</code> 和所有子资源完成加载。 <strong><code>load</code> 事件加载</strong></p>
</li>
</ul>
<blockquote>
<p><code>readyState</code> 属性值变化会触发 <code>document.onreadyStateChange</code> 事件</p>
</blockquote>
<p>IE 下 <code>document.documentElement.doScroll</code>，是 IE 下特有的方法，检测 <code>DOM</code> 是否加载完成。</p>
<h2 id="行内元素转块级元素"><a href="#行内元素转块级元素" class="headerlink" title="行内元素转块级元素"></a>行内元素转块级元素</h2><p><code>position: absolute / fixed;</code> 和 <code>float</code> 都可以使 行内元素转为块级元素</p>
<h2 id="i-与-i"><a href="#i-与-i" class="headerlink" title="i++ 与 ++i"></a>i++ 与 ++i</h2><p><img src="https://myblog-static.oss-cn-beijing.aliyuncs.com/post-imgs/%E9%97%AA%E5%BF%B5%E8%83%B6%E5%9B%8A/%2B%2Bi%26i%2B%2B.png?x-oss-process=style/blogImg-watermark" alt="++i & i++"></p>
<p>例：购物车修改数量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">shuliang = (++shuliang > stock ? stock : shuliang)</span><br></pre></td></tr></table></figure>
<h2 id="取整与转换"><a href="#取整与转换" class="headerlink" title="取整与转换"></a>取整与转换</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ac = <span class="string">'1.23423'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 字符串转数字</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">+ac <span class="comment">// 1.23423</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* 取整</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">~~ac</span><br><span class="line">ac >> <span class="number">0</span></span><br></pre></td></tr></table></figure>
<h2 id="判断奇偶"><a href="#判断奇偶" class="headerlink" title="判断奇偶"></a>判断奇偶</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">(<span class="number">222</span> & <span class="number">1</span>) == <span class="number">0</span> ? <span class="string">'偶数'</span> : <span class="string">'奇数'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">*取最近的偶数</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">( <span class="number">1111</span> | <span class="number">1</span> ) <span class="comment">// 1110</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">*除2取整</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">~~(<span class="number">5</span>/<span class="number">2</span>)</span><br><span class="line"><span class="number">5</span> >> <span class="number">1</span></span><br></pre></td></tr></table></figure>
<h2 id="强制-Webkit-内核渲染"><a href="#强制-Webkit-内核渲染" class="headerlink" title="强制 Webkit 内核渲染"></a>强制 Webkit 内核渲染</h2><p>很多国产浏览器都是双内核，例如“360、QQ”等，它们都提供了强制使用 Webkit 内核渲染的开启模式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"renderer"</span> <span class="attr">content</span>=<span class="string">"webkit"</span> /></span></span><br></pre></td></tr></table></figure>
<h2 id="CSS-语法中表示参数符号类型"><a href="#CSS-语法中表示参数符号类型" class="headerlink" title="CSS 语法中表示参数符号类型"></a>CSS 语法中表示参数符号类型</h2><p>以 <code>linear-gradient()</code> 举例</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">background-image</span>: <span class="selector-tag">linear-gradient</span>( <span class="selector-attr">[ <angle> | <side-or-corner> ,]</span>? <<span class="selector-tag">color-stop</span>> <span class="selector-attr">[, <color-stop>]</span>+ );</span><br></pre></td></tr></table></figure>
<ul>
<li><code>[]</code> 在正则中表示一个字符类，这里，你可以理解为一个小单元。</li>
<li><code>|</code> 表示候选。也就是“或者”的意思，要么前面的，要么就后面的。</li>
<li><code>?</code> 为量词，表示0个或1个，言外之意就是，你可以不指定方向，直接渐变色走起。例如：<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">background</span><span class="selector-pseudo">:linear-gradient(red</span>, <span class="selector-tag">yellow</span>);</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p>就是从上往下的红黄条纹效果。</p>
<ul>
<li><code>+</code> 也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。例如：linear-gradient(red)是酱油命，白板。</li>
<li><code><></code> 中的是关键字，主要是让开发人员知道这里应该放些什么内容。</li>
</ul>
<h2 id="CSS-选择器排序"><a href="#CSS-选择器排序" class="headerlink" title="CSS 选择器排序"></a>CSS 选择器排序</h2><p>1.id选择器（#myid）</p>
<p>2.类选择器（.myclassname）</p>
<p>3.标签选择器（div,h1,p）</p>
<p>4.相邻选择器（h1+p）</p>
<p>5.子选择器（ul < li）</p>
<p>6.后代选择器（li a）</p>
<p>7.通配符选择器（*）</p>
<p>8.属性选择器（a[rel=”external”]）</p>
<p>9.伪类选择（a:hover,li:nth-child）</p>
<h2 id="CSS-可继承-amp-不可继承属性"><a href="#CSS-可继承-amp-不可继承属性" class="headerlink" title="CSS 可继承 & 不可继承属性"></a>CSS 可继承 & 不可继承属性</h2><p><strong><em>不可继承</em></strong></p>
<ol>
<li><p>display：规定元素应该生成的框的类型</p>
</li>
<li><p>文本属性：</p>
<p> vertical-align：垂直文本对齐</p>
<p> text-decoration：规定添加到文本的装饰</p>
<p> text-shadow：文本阴影效果</p>
<p> white-space：空白符的处理</p>
<p> unicode-bidi：设置文本的方向</p>
</li>
<li><p>盒子模型的属性</p>
<p> <code>width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left</code></p>
</li>
<li><p>背景属性：<code>background、background-color、background-image、background-repeat、background-position、background-attachment</code></p>
</li>
<li><p>定位属性：<code>float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index</code></p>
</li>
<li><p>生成内容属性：<code>content、counter-reset、counter-increment</code></p>
</li>
<li><p>轮廓样式属性：<code>outline-style、outline-width、outline-color、outline</code></p>
</li>
<li><p>页面样式属性：<code>size、page-break-before、page-break-after</code></p>
</li>
<li><p>声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during</p>
</li>
</ol>
<p><strong><em>可继承属</em></strong></p>
<ol>
<li><p>字体系列属性<br> font：组合字体</p>
<p> font-family：规定元素的字体系列</p>
<p> font-weight：设置字体的粗细</p>
<p> font-size：设置字体的尺寸</p>
<p> font-style：定义字体的风格</p>
<p> font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。</p>
<p> font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。</p>
<p> font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。</p>
</li>
<li><p>文本系列属性</p>
<p> text-indent：文本缩进</p>
<p> text-align：文本水平对齐</p>
<p> line-height：行高</p>
<p> word-spacing：增加或减少单词间的空白（即字间隔）</p>
<p> letter-spacing：增加或减少字符间的空白（字符间距）</p>
<p> text-transform：控制文本大小写</p>
<p> direction：规定文本的书写方向</p>
<p> color：文本颜色</p>
</li>
<li><p>元素可见性：visibility</p>
</li>
<li><p>表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout</p>
</li>
<li><p>列表布局属性：list-style-type、list-style-image、list-style-position、list-style</p>
</li>
<li><p>生成内容属性：quotes</p>
</li>
<li><p>光标属性：cursor</p>
</li>
<li><p>页面样式属性：page、page-break-inside、windows、orphans</p>
</li>
<li><p>声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation</p>
</li>
</ol>
<p><strong><em>所有元素可以继承的属性</em></strong></p>
<ol>
<li><p>元素可见性：visibility</p>
</li>
<li><p>光标属性：cursor</p>
</li>
</ol>
<p><strong><em>内联元素可以继承的属性</em></strong></p>
<ol>
<li><p>字体系列属性</p>
</li>
<li><p>除text-indent、text-align之外的文本系列属性</p>
</li>
</ol>
<p><strong><em>块级元素可以继承的属性</em></strong></p>
<ol>
<li>text-indent、text-align</li>
</ol>
<blockquote>
<p><a href="https://www.cnblogs.com/thislbq/p/5882105.html" target="_blank" rel="noopener">参考</a></p>
</blockquote>
<h2 id="头部高度固定，剩下自适应"><a href="#头部高度固定，剩下自适应" class="headerlink" title="头部高度固定，剩下自适应"></a>头部高度固定，剩下自适应</h2><p>头部正常排列，下方 <code>width: 100%;absolute: top: 100px; bottom: 0;</code></p>
<blockquote>
<p>普通元素不设置宽度的时候改为绝对定位会丢失宽度</p>
</blockquote>
<h2 id="表单只有一个-input-text-时"><a href="#表单只有一个-input-text-时" class="headerlink" title="表单只有一个 input text 时"></a>表单只有一个 <code>input text</code> 时</h2><p>W3C 标准中有如下<a href="https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2" target="_blank" rel="noopener">规定</a>：</p>
<blockquote>
<p><strong><em>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</em></strong></p>
</blockquote>
<p>当 <code>form</code> 元素中只有一个输入框时， 在该输入框中按下回车应该提交表单。</p>
</div>
<footer class="article-footer">
<div id="donation_div"></div>
<script src="/js/vdonate.js"></script>
<script>
var a = new Donate({
title: '水平有限，喝杯咖啡交个朋友吧。', // 可选参数，打赏标题
btnText: 'Donate', // 可选参数，打赏按钮文字
el: document.getElementById('donation_div'),
wechatImage: 'https://myblog-static.oss-cn-beijing.aliyuncs.com/Donate/wechat.png?x-oss-process=style/blogImg-watermark',
alipayImage: 'https://myblog-static.oss-cn-beijing.aliyuncs.com/Donate/alipay.jpg?x-oss-process=style/blogImg-watermark'
});
</script>
<div id="comment">
<!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8yOTQ4MS82MDQ5">
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
</div>
</footer>
</div>
<nav id="article-nav">
<a href="/MacOS-下安装配置-jdk.html" id="article-nav-newer" class="article-nav-link-wrap">
<strong class="article-nav-caption">Newer</strong>
<div class="article-nav-title">
MacOS 下安装配置 jdk
</div>
</a>
<a href="/浮点数精度丢失问题.html" id="article-nav-older" class="article-nav-link-wrap">
<strong class="article-nav-caption">Older</strong>
<div class="article-nav-title">浮点数精度丢失问题</div>
</a>
</nav>
</article>
<!-- Table of Contents -->
<aside id="toc-sidebar">
<div id="toc" class="toc-article">
<strong class="toc-title">Contents</strong>
<ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#逗号运算符"><span class="nav-number">1.</span> <span class="nav-text">逗号运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#带命名空间的事件-namespaced-events"><span class="nav-number">2.</span> <span class="nav-text">带命名空间的事件(namespaced events)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#几个测试题"><span class="nav-number">3.</span> <span class="nav-text">几个测试题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#this"><span class="nav-number">4.</span> <span class="nav-text">this</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#typeof-null-39-object-39-的原理"><span class="nav-number">5.</span> <span class="nav-text">typeof(null) === 'object' 的原理</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Javascript-类型"><span class="nav-number">6.</span> <span class="nav-text">Javascript 类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#https-请求方式"><span class="nav-number">7.</span> <span class="nav-text">https 请求方式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#阻止表单提交"><span class="nav-number">8.</span> <span class="nav-text">阻止表单提交</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#禁用-input-记忆性输入"><span class="nav-number">9.</span> <span class="nav-text">禁用 input 记忆性输入</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jQuery-事件委托"><span class="nav-number">10.</span> <span class="nav-text">jQuery 事件委托</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#快速生成时间戳"><span class="nav-number">11.</span> <span class="nav-text">快速生成时间戳</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨-iframe-获取元素"><span class="nav-number">12.</span> <span class="nav-text">跨 iframe 获取元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Document-readyState-文档加载状态"><span class="nav-number">13.</span> <span class="nav-text">Document.readyState 文档加载状态</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#行内元素转块级元素"><span class="nav-number">14.</span> <span class="nav-text">行内元素转块级元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#i-与-i"><span class="nav-number">15.</span> <span class="nav-text">i++ 与 ++i</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#取整与转换"><span class="nav-number">16.</span> <span class="nav-text">取整与转换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#判断奇偶"><span class="nav-number">17.</span> <span class="nav-text">判断奇偶</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#强制-Webkit-内核渲染"><span class="nav-number">18.</span> <span class="nav-text">强制 Webkit 内核渲染</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-语法中表示参数符号类型"><span class="nav-number">19.</span> <span class="nav-text">CSS 语法中表示参数符号类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-选择器排序"><span class="nav-number">20.</span> <span class="nav-text">CSS 选择器排序</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS-可继承-amp-不可继承属性"><span class="nav-number">21.</span> <span class="nav-text">CSS 可继承 & 不可继承属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#头部高度固定，剩下自适应"><span class="nav-number">22.</span> <span class="nav-text">头部高度固定，剩下自适应</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#表单只有一个-input-text-时"><span class="nav-number">23.</span> <span class="nav-text">表单只有一个 input text 时</span></a></li></ol>
</div>
</aside>
</section>
</div>
<footer id="footer">
<div class="container">
<div class="row">
<!-- <p> Powered by <a href="http://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/iTimeTraveler/hexo-theme-hiker" target="_blank">Hexo-theme-hiker</a> </p> -->
<p id="copyRightEn">Copyright © 2017 - 2018 空脑壳 All Rights Reserved.</p>
<p>冀ICP备17022284号</p>
</div>
</div>
</footer>
<!-- min height -->
<script>
var wrapdiv = document.getElementById("wrap");
var contentdiv = document.getElementById("content");
var allheader = document.getElementById("allheader");
wrapdiv.style.minHeight = document.body.offsetHeight + "px";
if (allheader != null) {
contentdiv.style.minHeight = document.body.offsetHeight - allheader.offsetHeight - document.getElementById("footer").offsetHeight + "px";
} else {
contentdiv.style.minHeight = document.body.offsetHeight - document.getElementById("footer").offsetHeight + "px";
}
</script>
</div>
<!-- <nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
<a href="/categories" class="mobile-nav-link">Categories</a>
<a href="/tags" class="mobile-nav-link">Tags</a>
</nav> -->
<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/scripts.js"></script>
<script src="/js/dialog.js"></script>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="myModalLabel">设置</h2>
</div>
<hr style="margin-top:0px; margin-bottom:0px; width:80%; border-top: 3px solid #000;">
<hr style="margin-top:2px; margin-bottom:0px; width:80%; border-top: 1px solid #000;">
<div class="modal-body">
<div style="margin:6px;">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" onclick="javascript:setFontSize();" aria-expanded="true" aria-controls="collapseOne">
正文字号大小
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
您已调整页面字体大小
</div>
</div>
<div style="margin:6px;">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" onclick="javascript:setBackground();" aria-expanded="true" aria-controls="collapseTwo">
夜间护眼模式
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
夜间模式已经开启，再次单击按钮即可关闭
</div>
</div>
<div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree"> 关 于 </a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
空脑壳
</div>
<div class="panel-body">
Copyright © 2018 雷雷雷 All Rights Reserved.
</div>
</div>
</div>
<hr style="margin-top:0px; margin-bottom:0px; width:80%; border-top: 1px solid #000;">
<hr style="margin-top:2px; margin-bottom:0px; width:80%; border-top: 3px solid #000;">
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
</div>
</div>
</div>
<a id="rocket" href="#top" class=""></a>
<script type="text/javascript" src="/js/totop.js?v=1.0.0" async=""></script>
<a id="menu-switch"><i class="fa fa-bars fa-lg"></i></a>
</body>
</html>