-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
555 lines (421 loc) · 119 KB
/
atom.xml
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Qiongbei</title>
<link href="/atom.xml" rel="self"/>
<link href="http://www.aqiongbei.top/"/>
<updated>2016-10-20T12:41:40.568Z</updated>
<id>http://www.aqiongbei.top/</id>
<author>
<name>Qiongbei</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>数组去重方法</title>
<link href="http://www.aqiongbei.top/2016/10/20/Delete-array-duplicates/"/>
<id>http://www.aqiongbei.top/2016/10/20/Delete-array-duplicates/</id>
<published>2016-10-20T12:22:12.000Z</published>
<updated>2016-10-20T12:41:40.568Z</updated>
<content type="html"><![CDATA[<h1 id="版本一"><a href="#版本一" class="headerlink" title="版本一"></a>版本一</h1><h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>从小到大排序，前一个和后一个对比，不相同的话把前一个放入新数组</p>
</blockquote>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a=[<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'1'</span>, <span class="number">0</span>, <span class="string">'c'</span>, <span class="number">1</span>, <span class="string">''</span>, <span class="number">1</span>, <span class="number">0</span>];</div><div class="line"><span class="comment">// console.log("原数组：");</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"原数组："</span>,a);</div><div class="line"><span class="keyword">var</span> b=[];</div><div class="line"><span class="keyword">var</span> aSort =a.sort(</div><div class="line"> <span class="function"><span class="keyword">function</span> (<span class="params">a,b</span>) </span>{</div><div class="line"> <span class="keyword">return</span> a-b;</div><div class="line"> });</div><div class="line"><span class="comment">// console.log("排序后：");</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"排序后："</span>,aSort);</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i <= aSort.length ; i++) {</div><div class="line"> <span class="keyword">if</span> (aSort[i]!== aSort[i+<span class="number">1</span>]) {</div><div class="line"> b.push(aSort[i]);</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="comment">// console.log("去重后：");</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"去重后："</span>,b.sort(</div><div class="line"> <span class="function"><span class="keyword">function</span> (<span class="params">a,b</span>) </span>{</div><div class="line"> <span class="keyword">return</span> a-b;</div><div class="line"> }));</div></pre></td></tr></table></figure>
<a id="more"></a>
<h1 id="版本二"><a href="#版本二" class="headerlink" title="版本二"></a>版本二</h1><h2 id="思路-1"><a href="#思路-1" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>版本二新数组中依次对比，没出现，放入新数组</p>
</blockquote>
<h2 id="代码-1"><a href="#代码-1" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = [<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'1'</span>, <span class="number">0</span>, <span class="string">'c'</span>, <span class="number">1</span>, <span class="string">''</span>, <span class="number">1</span>, <span class="number">0</span>];</div><div class="line"><span class="keyword">var</span> b = [];</div><div class="line"></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"原数组："</span>,a);</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span> ; i < a.length; i++) {</div><div class="line"> <span class="keyword">var</span> n = <span class="number">0</span>;</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j < b.length; j++) {</div><div class="line"> <span class="keyword">if</span>(b[j] !== a[i]){</div><div class="line"> n++;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span>(n == b.length){</div><div class="line"> b.push(a[i]);</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"去重后："</span>,b);</div></pre></td></tr></table></figure>
<h1 id="版本三"><a href="#版本三" class="headerlink" title="版本三"></a>版本三</h1><h2 id="思路-2"><a href="#思路-2" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>利用idexOf()，当这个值不在新数组时，加入该值</p>
</blockquote>
<h2 id="代码-2"><a href="#代码-2" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">846549</span>,<span class="number">8</span>,<span class="number">46544</span>,<span class="number">66</span>,<span class="number">54</span>,<span class="number">8</span>];</div><div class="line"><span class="keyword">var</span> b = [];</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"原数组："</span>,a);</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span> ; i < a.length; i++) {</div><div class="line"> <span class="keyword">if</span>(b.indexOf(a[i])== <span class="number">-1</span>){</div><div class="line"> b.push(a[i]);</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"去重后："</span>,b);</div></pre></td></tr></table></figure>
<h1 id="版本四"><a href="#版本四" class="headerlink" title="版本四"></a>版本四</h1><h2 id="思路-3"><a href="#思路-3" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>判断原始数组的第i个元素出现的位置是不是第i个，是的话就放入新数组</p>
</blockquote>
<h2 id="代码-3"><a href="#代码-3" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">8469</span>,<span class="number">8</span>,<span class="number">46544</span>,<span class="number">66</span>,<span class="number">54</span>,<span class="number">8</span>];</div><div class="line"><span class="keyword">var</span> b = [];</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"原数组："</span>,a);</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span> ; i < a.length; i++) {</div><div class="line"> <span class="keyword">if</span>(a.indexOf(a[i])== i){</div><div class="line"> b.push(a[i]);</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"去重后："</span>,b);</div></pre></td></tr></table></figure>
<h1 id="版本五"><a href="#版本五" class="headerlink" title="版本五"></a>版本五</h1><h2 id="思路-4"><a href="#思路-4" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>利用一个hash表来判断一个值是否已经存在，不存在就存入新数组</p>
</blockquote>
<h2 id="代码-4"><a href="#代码-4" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">5</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">846549</span>,<span class="number">8</span>,<span class="number">46544</span>,<span class="number">66</span>,<span class="number">54</span>,<span class="number">8</span>];</div><div class="line"><span class="keyword">var</span> b = [];</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"原数组："</span>,a);</div><div class="line"><span class="keyword">var</span> hash=[];</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span> ; i < a.length; i++) {</div><div class="line"> <span class="keyword">if</span>(!hash[a[i]]){</div><div class="line"> hash[a[i]] =<span class="literal">true</span>;</div><div class="line"> b.push(a[i]);</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"去重后："</span>,b);</div></pre></td></tr></table></figure>
<h1 id="版本六"><a href="#版本六" class="headerlink" title="版本六"></a>版本六</h1><h2 id="思路-5"><a href="#思路-5" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>对象方式，将数组存入对象，如果，在对象中已经存在该项，在数组中删除该项数组前移消耗性能会造成数组塌陷数组塌陷：数组中某一项删除之后，该项后面的项前移，循环从该项的+2项开始导致的该项的+1项被跳过的情况</p>
</blockquote>
<h2 id="代码-5"><a href="#代码-5" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> ary=[<span class="number">123</span>,<span class="number">15</span>,<span class="number">2</span>,<span class="number">31</span>,<span class="number">61</span>,<span class="number">54</span>,<span class="number">1</span>,<span class="number">15</span>,<span class="number">2</span>,<span class="number">31</span>,<span class="number">61</span>,<span class="number">54</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">1</span>,<span class="number">5</span>];</div><div class="line"><span class="keyword">var</span> obj={};</div><div class="line"><span class="built_in">console</span>.log(ary);</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < ary.length; i++) {</div><div class="line"> <span class="keyword">var</span> cur = ary[i];</div><div class="line"> <span class="keyword">if</span> (obj[cur] == cur) {</div><div class="line"> ary.splice(i,<span class="number">1</span>);</div><div class="line"> <span class="comment">// 造成数组塌陷</span></div><div class="line"> i--;</div><div class="line"> }</div><div class="line"> <span class="keyword">else</span>{</div><div class="line"> obj[cur] = cur;</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(obj);</div><div class="line"><span class="built_in">console</span>.log(ary);</div></pre></td></tr></table></figure>
<h1 id="版本七"><a href="#版本七" class="headerlink" title="版本七"></a>版本七</h1><h2 id="思路-6"><a href="#思路-6" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>利用对象属性名重复会覆盖的特点去重将数组全部存入对象，属性名等于属性值。<br>因为对象重复属性名会覆盖，所以此时已经实现去重再将对象转为数组即可</p>
</blockquote>
<h2 id="代码-6"><a href="#代码-6" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> ary=[<span class="number">123</span>,<span class="number">15</span>,<span class="number">2</span>,<span class="number">31</span>,<span class="number">61</span>,<span class="number">54</span>,<span class="number">1</span>,<span class="number">15</span>,<span class="number">2</span>,<span class="number">31</span>,<span class="number">61</span>,<span class="number">54</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">1</span>,<span class="number">5</span>,<span class="string">"123"</span>,<span class="number">123</span>,<span class="number">123</span>];</div><div class="line"><span class="keyword">var</span> obj={};</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < ary.length; i++) {</div><div class="line"> <span class="keyword">var</span> cur =ary[i];</div><div class="line"> obj[cur]=cur;</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(obj);</div><div class="line"><span class="keyword">var</span> ary2=[];</div><div class="line"><span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj){</div><div class="line"> ary2.push(obj[key])</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(ary2);</div></pre></td></tr></table></figure>
<h1 id="版本八"><a href="#版本八" class="headerlink" title="版本八"></a>版本八</h1><h2 id="思路-7"><a href="#思路-7" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>前面的版本六七由于数组频繁前移,消耗性能利用上面的当在对象中存在该项时将数组的最后一项挖过来替换该项</p>
</blockquote>
<h2 id="代码-7"><a href="#代码-7" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> ary=[<span class="number">123</span>,<span class="number">15</span>,<span class="number">2</span>,<span class="number">31</span>,<span class="number">61</span>,<span class="number">54</span>,<span class="number">1</span>,<span class="number">15</span>,<span class="number">2</span>,<span class="number">31</span>,<span class="number">61</span>,<span class="number">54</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">1</span>,<span class="number">5</span>,<span class="string">"123"</span>,<span class="number">123</span>,<span class="number">123</span>];</div><div class="line"><span class="keyword">var</span> obj={};</div><div class="line"><span class="built_in">console</span>.log(ary);</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < ary.length; i++) {</div><div class="line"> <span class="keyword">var</span> cur=ary[i];</div><div class="line"> <span class="keyword">if</span> (obj[cur]===cur) {</div><div class="line"> ary[i]=ary[ary.length<span class="number">-1</span>];</div><div class="line"> ary.length--;</div><div class="line"> i--;<span class="comment">//不进行i--的话会跳过某些项</span></div><div class="line"> }</div><div class="line"> <span class="keyword">else</span>{</div><div class="line"> obj[cur]=cur;</div><div class="line"> }</div><div class="line"> </div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(ary);</div></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="版本一"><a href="#版本一" class="headerlink" title="版本一"></a>版本一</h1><h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>从小到大排序，前一个和后一个对比，不相同的话把前一个放入新数组</p>
</blockquote>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a=[<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'1'</span>, <span class="number">0</span>, <span class="string">'c'</span>, <span class="number">1</span>, <span class="string">''</span>, <span class="number">1</span>, <span class="number">0</span>];</div><div class="line"><span class="comment">// console.log("原数组：");</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"原数组："</span>,a);</div><div class="line"><span class="keyword">var</span> b=[];</div><div class="line"><span class="keyword">var</span> aSort =a.sort(</div><div class="line"> <span class="function"><span class="keyword">function</span> (<span class="params">a,b</span>) </span>&#123;</div><div class="line"> <span class="keyword">return</span> a-b;</div><div class="line"> &#125;);</div><div class="line"><span class="comment">// console.log("排序后：");</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"排序后："</span>,aSort);</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt;= aSort.length ; i++) &#123;</div><div class="line"> <span class="keyword">if</span> (aSort[i]!== aSort[i+<span class="number">1</span>]) &#123;</div><div class="line"> b.push(aSort[i]);</div><div class="line"> &#125;</div><div class="line">&#125;</div><div class="line"><span class="comment">// console.log("去重后：");</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">"去重后："</span>,b.sort(</div><div class="line"> <span class="function"><span class="keyword">function</span> (<span class="params">a,b</span>) </span>&#123;</div><div class="line"> <span class="keyword">return</span> a-b;</div><div class="line"> &#125;));</div></pre></td></tr></table></figure>
</summary>
<category term="学习" scheme="http://www.aqiongbei.top/categories/%E5%AD%A6%E4%B9%A0/"/>
<category term="javascript" scheme="http://www.aqiongbei.top/tags/javascript/"/>
<category term="array" scheme="http://www.aqiongbei.top/tags/array/"/>
</entry>
<entry>
<title>数组排序方法</title>
<link href="http://www.aqiongbei.top/2016/10/20/array-and-sort/"/>
<id>http://www.aqiongbei.top/2016/10/20/array-and-sort/</id>
<published>2016-10-20T11:51:40.000Z</published>
<updated>2016-10-20T12:41:19.517Z</updated>
<content type="html"><![CDATA[<h1 id="快速排序"><a href="#快速排序" class="headerlink" title="快速排序"></a>快速排序</h1><h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>1、获取中间值，在原数组中删除中间值<br>2、原数组与中间值对比，小于中间值放进left数组，否则放入right数组<br>3、递归这一过程<br>4、数组拼接<br>5、数组长度小于等于1返回数组</p>
</blockquote>
<a id="more"></a>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> ary=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">1</span>,<span class="number">3</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">85</span>,<span class="number">51</span>,<span class="number">54</span>,<span class="number">8</span>,<span class="number">5</span>,<span class="number">4584</span>,<span class="number">1</span>,<span class="number">5</span>,<span class="number">45</span>];</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"原始数组"</span>);</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">quickSort</span>(<span class="params">ary</span>) </span>{</div><div class="line"> <span class="keyword">if</span> (ary.length<=<span class="number">1</span>) {</div><div class="line"> <span class="keyword">return</span> ary;</div><div class="line"> }</div><div class="line"> <span class="keyword">var</span> cen = <span class="built_in">Math</span>.floor(ary.length/<span class="number">2</span>);</div><div class="line"> <span class="keyword">var</span> cenVal =ary.splice(cen,<span class="number">1</span>)[<span class="number">0</span>];</div><div class="line"> <span class="keyword">var</span> left=[];</div><div class="line"> <span class="keyword">var</span> right =[];</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < ary.length; i++) {</div><div class="line"> <span class="keyword">var</span> cur=ary[i];</div><div class="line"> <span class="keyword">if</span>(cur<cenVal){</div><div class="line"> left.push(cur);</div><div class="line"> }<span class="keyword">else</span>{</div><div class="line"> right.push(cur);</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> quickSort(left).concat([cenVal],quickSort(right));</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"快速排序后:"</span>,quickSort(ary));</div></pre></td></tr></table></figure>
<h1 id="插入排序"><a href="#插入排序" class="headerlink" title="插入排序"></a>插入排序</h1><h2 id="思路-1"><a href="#思路-1" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>1、新建一个数组，将原始数组的第一个放入新建数组<br>2、原始数组从索引1开始循环与新建数组中的内容对比，如果，这个值大于新建数组中的某个值，就把这个数插入到这个数的后面。结束循环。<br>3、如果，这个值小于新建数组的第一项，则把这个值添加到新建数组的前面。结束循环。<br>4、循环2、3步</p>
</blockquote>
<h2 id="代码-1"><a href="#代码-1" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"> <span class="keyword">var</span> ary=[<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">2</span>,<span class="number">12</span>,<span class="number">12</span>,<span class="number">12</span>,<span class="number">121</span>,<span class="number">21</span>,<span class="number">2</span>];</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">"原始数组："</span>,ary);</div><div class="line"> <span class="keyword">var</span> arySort =[ary[<span class="number">0</span>]];</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < ary.length; i++) {</div><div class="line"> <span class="keyword">var</span> cur =ary[i];</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = arySort.length<span class="number">-1</span>; j >=<span class="number">0</span>; j--) {</div><div class="line"> <span class="keyword">if</span> (cur>arySort[j]) {</div><div class="line"> arySort.splice(j+<span class="number">1</span>,<span class="number">0</span>,cur);</div><div class="line"> <span class="keyword">break</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">if</span> (cur<=arySort[<span class="number">0</span>]) {</div><div class="line"> arySort.unshift(cur);</div><div class="line"> <span class="keyword">break</span>;</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">"插入排序后："</span>,arySort);</div><div class="line">};</div></pre></td></tr></table></figure>
<h1 id="冒泡排序"><a href="#冒泡排序" class="headerlink" title="冒泡排序"></a>冒泡排序</h1><h2 id="思路-2"><a href="#思路-2" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>1、比较两个数，如果前面的数小于后面的数，交换位置。<br>2、循环此过程</p>
</blockquote>
<h2 id="代码-2"><a href="#代码-2" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a=[<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">2</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">9</span>,<span class="number">0</span>];</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"原始数组"</span>,a);</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < a.length; i++) {</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j < a.length<span class="number">-1</span>-i; j++) {</div><div class="line"> <span class="keyword">if</span> (a[j] > a[j+<span class="number">1</span>]) {</div><div class="line"> <span class="keyword">var</span> n=a[j];</div><div class="line"> a[j]=a[j+<span class="number">1</span>];</div><div class="line"> a[j+<span class="number">1</span>]=n;</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"冒泡排序后数组"</span>,a);</div></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="快速排序"><a href="#快速排序" class="headerlink" title="快速排序"></a>快速排序</h1><h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><blockquote>
<p>1、获取中间值，在原数组中删除中间值<br>2、原数组与中间值对比，小于中间值放进left数组，否则放入right数组<br>3、递归这一过程<br>4、数组拼接<br>5、数组长度小于等于1返回数组</p>
</blockquote>
</summary>
<category term="学习" scheme="http://www.aqiongbei.top/categories/%E5%AD%A6%E4%B9%A0/"/>
<category term="javascript" scheme="http://www.aqiongbei.top/tags/javascript/"/>
<category term="array" scheme="http://www.aqiongbei.top/tags/array/"/>
<category term="sort" scheme="http://www.aqiongbei.top/tags/sort/"/>
</entry>
<entry>
<title>关于两个数交换值的方法</title>
<link href="http://www.aqiongbei.top/2016/10/20/about-two-number-change/"/>
<id>http://www.aqiongbei.top/2016/10/20/about-two-number-change/</id>
<published>2016-10-20T09:03:31.000Z</published>
<updated>2016-10-20T11:50:34.791Z</updated>
<content type="html"><![CDATA[<h2 id="一般做法"><a href="#一般做法" class="headerlink" title="一般做法"></a>一般做法</h2><h3 id="借助第三个参数"><a href="#借助第三个参数" class="headerlink" title="借助第三个参数"></a>借助第三个参数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="number">10</span>,b = <span class="number">20</span>;</div><div class="line"><span class="keyword">var</span> temp = a;</div><div class="line">a = b;</div><div class="line">b = a;</div></pre></td></tr></table></figure>
<h2 id="巧妙做法"><a href="#巧妙做法" class="headerlink" title="巧妙做法"></a>巧妙做法</h2><a id="more"></a>
<h3 id="加法运算"><a href="#加法运算" class="headerlink" title="加法运算"></a>加法运算</h3><h4 id="a、b同号"><a href="#a、b同号" class="headerlink" title="a、b同号"></a>a、b同号</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="number">10</span>,b = <span class="number">20</span>;</div><div class="line">a = a + b;</div><div class="line">b = a - b;</div><div class="line">a = a - b;</div><div class="line"><span class="comment">//某些情况下会导致溢出</span></div></pre></td></tr></table></figure>
<h4 id="a、b异号"><a href="#a、b异号" class="headerlink" title="a、b异号"></a>a、b异号</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="number">10</span>,b = <span class="number">-20</span>;</div><div class="line">a = a - b;</div><div class="line">b = a + b;</div><div class="line">a = a - b;</div><div class="line"><span class="comment">//某些情况下会导致溢出</span></div></pre></td></tr></table></figure>
<h4 id="a、b忽略正负的情况"><a href="#a、b忽略正负的情况" class="headerlink" title="a、b忽略正负的情况"></a>a、b忽略正负的情况</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span>(a==b) <span class="keyword">return</span> ;</div><div class="line"><span class="keyword">if</span>((a><span class="number">0</span> && b><span class="number">0</span>)||(a<<span class="number">0</span> && b<<span class="number">0</span>)){</div><div class="line"> a = a + b;</div><div class="line"> b = a - b;</div><div class="line"> a = a - b;</div><div class="line">}<span class="keyword">else</span>{</div><div class="line"> a = a - b;</div><div class="line"> b = a + b;</div><div class="line"> a = a - b;</div><div class="line">}</div><div class="line"><span class="comment">//某些情况下会导致溢出</span></div></pre></td></tr></table></figure>
<h3 id="异或运算"><a href="#异或运算" class="headerlink" title="异或运算"></a>异或运算</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="number">10</span>,b = <span class="number">-20</span>;</div><div class="line">a = a ^ b;</div><div class="line">b = a ^ b;</div><div class="line">a = a ^ b;</div><div class="line"><span class="comment">//不会导致溢出，最保险的做法</span></div></pre></td></tr></table></figure>
<h4 id="相关知识"><a href="#相关知识" class="headerlink" title="相关知识"></a>相关知识</h4><p><code>^</code>为异或运算符。</p>
<h5 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h5><blockquote>
<p>异或：<br>输入不同时结果为1<br>输入相同时结果为0</p>
</blockquote>
<p><table><tr><th>输入</th><th>输入</th><th>输出</th></tr><tr><td>1</td><td>1</td><td>0</td></tr><tr><td>0</td><td>0</td><td>0</td></tr><tr><td>0</td><td>1</td><td>1</td></tr><tr><td>1</td><td>0</td><td>1</td></tr></table><br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">例子:10^50</div><div class="line">会先转换成二进制,对二进制值进行异或运算然后转换成十进制</div><div class="line">转换二进制:</div><div class="line"> 10-->二进制 1010</div><div class="line"> 50-->二进制 110010</div><div class="line">异或:</div><div class="line"> 001010</div><div class="line"> 110010</div><div class="line"> _______</div><div class="line"> 111000-->十进制56</div></pre></td></tr></table></figure></p>
<h4 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h4><p>上面的程序我们实现的具体过程是这样的:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="number">10</span>; <span class="comment">//10-->二进制 1010</span></div><div class="line"><span class="keyword">var</span> b = <span class="number">50</span>; <span class="comment">//50-->二进制 110010</span></div><div class="line">a = a ^ b; <span class="comment">// a = a ^ b</span></div><div class="line"> <span class="comment">// 001010</span></div><div class="line"> <span class="comment">// 110010</span></div><div class="line"> <span class="comment">// _______</span></div><div class="line"> <span class="comment">// 111000</span></div><div class="line"></div><div class="line">b = a ^ b; <span class="comment">// b = a ^ b </span></div><div class="line"> <span class="comment">// 110010</span></div><div class="line"> <span class="comment">// 111000</span></div><div class="line"> <span class="comment">// _______</span></div><div class="line"> <span class="comment">// 001010 --> 10=a</span></div><div class="line"></div><div class="line">a = a ^ b; <span class="comment">// b = a ^ b </span></div><div class="line"> <span class="comment">// 110010</span></div><div class="line"> <span class="comment">// 001010</span></div><div class="line"> <span class="comment">// _______</span></div><div class="line"> <span class="comment">// 110010 --> 50=b</span></div><div class="line"><span class="comment">//不会导致溢出，最保险的做法</span></div></pre></td></tr></table></figure></p>
<p>如果a、b异号，是这样的:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="number">-10</span>; <span class="comment">//-10-->二进制 11010</span></div><div class="line"><span class="keyword">var</span> b = <span class="number">50</span>; <span class="comment">//50-->二进制 110010</span></div><div class="line">a = a ^ b; <span class="comment">// a = a ^ b</span></div><div class="line"> <span class="comment">// 011010</span></div><div class="line"> <span class="comment">// 110010</span></div><div class="line"> <span class="comment">// _______</span></div><div class="line"> <span class="comment">// 101000</span></div><div class="line"></div><div class="line">b = a ^ b; <span class="comment">// b = a ^ b </span></div><div class="line"> <span class="comment">// 101000</span></div><div class="line"> <span class="comment">// 110010</span></div><div class="line"> <span class="comment">// _______</span></div><div class="line"> <span class="comment">// 011010 --> -10=a</span></div><div class="line"></div><div class="line">a = a ^ b; <span class="comment">// b = a ^ b </span></div><div class="line"> <span class="comment">// 101000</span></div><div class="line"> <span class="comment">// 011010</span></div><div class="line"> <span class="comment">// _______</span></div><div class="line"> <span class="comment">// 110010 --> 50=b</span></div><div class="line"><span class="comment">//与上面一样的过程，更加简单</span></div></pre></td></tr></table></figure></p>
]]></content>
<summary type="html">
<h2 id="一般做法"><a href="#一般做法" class="headerlink" title="一般做法"></a>一般做法</h2><h3 id="借助第三个参数"><a href="#借助第三个参数" class="headerlink" title="借助第三个参数"></a>借助第三个参数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="number">10</span>,b = <span class="number">20</span>;</div><div class="line"><span class="keyword">var</span> temp = a;</div><div class="line">a = b;</div><div class="line">b = a;</div></pre></td></tr></table></figure>
<h2 id="巧妙做法"><a href="#巧妙做法" class="headerlink" title="巧妙做法"></a>巧妙做法</h2>
</summary>
<category term="学习" scheme="http://www.aqiongbei.top/categories/%E5%AD%A6%E4%B9%A0/"/>
<category term="javascript" scheme="http://www.aqiongbei.top/tags/javascript/"/>
<category term="两个数交换值" scheme="http://www.aqiongbei.top/tags/%E4%B8%A4%E4%B8%AA%E6%95%B0%E4%BA%A4%E6%8D%A2%E5%80%BC/"/>
</entry>
<entry>
<title>关于setInterval()模拟循环的问题</title>
<link href="http://www.aqiongbei.top/2016/10/14/about-setInterval/"/>
<id>http://www.aqiongbei.top/2016/10/14/about-setInterval/</id>
<published>2016-10-14T05:34:03.000Z</published>
<updated>2016-10-14T07:18:02.571Z</updated>
<content type="html"><![CDATA[<h2 id="问题情境"><a href="#问题情境" class="headerlink" title="问题情境"></a>问题情境</h2><ul>
<li>实现功能：逐个输出99乘法表</li>
<li>程序（js部分）：</li>
</ul>
<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">document</span>.body.innerHTML += <span class="string">"<ul></ul>"</span>;</div><div class="line"> <span class="keyword">var</span> oUl =<span class="built_in">document</span>.getElementsByTagName(<span class="string">"ul"</span>)[<span class="number">0</span>];</div><div class="line"> <span class="keyword">var</span> i= <span class="number">1</span>;</div><div class="line"> <span class="keyword">var</span> timer1 =setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">if</span> (i<=<span class="number">9</span>) {</div><div class="line"> oUl.innerHTML += <span class="string">"<li></li>"</span>;</div><div class="line"> <span class="keyword">var</span> oLi=<span class="built_in">document</span>.getElementsByTagName(<span class="string">"li"</span>)[i];</div><div class="line"> <span class="keyword">var</span> j= <span class="number">1</span>;</div><div class="line"> <span class="keyword">var</span> timer2 = setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">if</span> (j<=i) {</div><div class="line"> <span class="keyword">var</span> str = i+<span class="string">"*"</span>+j+<span class="string">"="</span>+i*j;</div><div class="line"> oLi.innerHTML += <span class="string">"<span>"</span>+ str +<span class="string">"</span>"</span>;</div><div class="line"> j ++;</div><div class="line"> }</div><div class="line"> <span class="keyword">else</span>{</div><div class="line"> clearInterval(timer2);</div><div class="line"> }</div><div class="line"></div><div class="line"> },<span class="number">500</span>);</div><div class="line"> i ++;</div><div class="line"> }</div><div class="line"> <span class="keyword">else</span>{</div><div class="line"> clearInterval(timer1);</div><div class="line"> }</div><div class="line"> },<span class="number">4500</span>);</div><div class="line">};</div></pre></td></tr></table></figure>
<p>上面的代码完全是利用setInterval()模拟的定时器做的99乘法表，<br>思路是按照for循环嵌套的方式来的。<br>但是输出时却出现了这样的情况：</p>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="number">2</span>*<span class="number">1</span>=<span class="number">22</span>*<span class="number">2</span>=<span class="number">4</span></div><div class="line"><span class="number">3</span>*<span class="number">1</span>=<span class="number">33</span>*<span class="number">2</span>=<span class="number">63</span>*<span class="number">3</span>=<span class="number">9</span></div><div class="line"><span class="number">4</span>*<span class="number">1</span>=<span class="number">44</span>*<span class="number">2</span>=<span class="number">84</span>*<span class="number">3</span>=<span class="number">124</span>*<span class="number">4</span>=<span class="number">16</span></div><div class="line"><span class="number">5</span>*<span class="number">1</span>=<span class="number">55</span>*<span class="number">2</span>=<span class="number">105</span>*<span class="number">3</span>=<span class="number">155</span>*<span class="number">4</span>=<span class="number">205</span>*<span class="number">5</span>=<span class="number">25</span></div><div class="line"><span class="number">6</span>*<span class="number">1</span>=<span class="number">66</span>*<span class="number">2</span>=<span class="number">126</span>*<span class="number">3</span>=<span class="number">186</span>*<span class="number">4</span>=<span class="number">246</span>*<span class="number">5</span>=<span class="number">306</span>*<span class="number">6</span>=<span class="number">36</span></div><div class="line"><span class="number">7</span>*<span class="number">1</span>=<span class="number">77</span>*<span class="number">2</span>=<span class="number">147</span>*<span class="number">3</span>=<span class="number">217</span>*<span class="number">4</span>=<span class="number">287</span>*<span class="number">5</span>=<span class="number">357</span>*<span class="number">6</span>=<span class="number">427</span>*<span class="number">7</span>=<span class="number">49</span></div><div class="line"><span class="number">8</span>*<span class="number">1</span>=<span class="number">88</span>*<span class="number">2</span>=<span class="number">168</span>*<span class="number">3</span>=<span class="number">248</span>*<span class="number">4</span>=<span class="number">328</span>*<span class="number">5</span>=<span class="number">408</span>*<span class="number">6</span>=<span class="number">488</span>*<span class="number">7</span>=<span class="number">568</span>*<span class="number">8</span>=<span class="number">64</span></div><div class="line"><span class="number">9</span>*<span class="number">1</span>=<span class="number">99</span>*<span class="number">2</span>=<span class="number">189</span>*<span class="number">3</span>=<span class="number">279</span>*<span class="number">4</span>=<span class="number">369</span>*<span class="number">5</span>=<span class="number">459</span>*<span class="number">6</span>=<span class="number">549</span>*<span class="number">7</span>=<span class="number">639</span>*<span class="number">8</span>=<span class="number">72</span></div><div class="line"><span class="number">10</span>*<span class="number">1</span>=<span class="number">1010</span>*<span class="number">2</span>=<span class="number">2010</span>*<span class="number">3</span>=<span class="number">3010</span>*<span class="number">4</span>=<span class="number">4010</span>*<span class="number">5</span>=<span class="number">5010</span>*<span class="number">6</span>=<span class="number">6010</span>*<span class="number">7</span>=<span class="number">7010</span>*<span class="number">8</span>=<span class="number">8010</span>*<span class="number">9</span>=<span class="number">9010</span>*<span class="number">10</span>=<span class="number">100</span></div></pre></td></tr></table></figure>
<p>输出从2*1=2开始，到10*10结束。</p>
<p>为什么会是从2-10呢？这是个问题。<br>难道是setInterval()执行的问题？</p>
<h2 id="相关知识"><a href="#相关知识" class="headerlink" title="相关知识"></a>相关知识</h2><p>我去查了setInterval()的用法</p>
<blockquote>
<p>setInterval()</p>
</blockquote>
<p>w3c这样介绍:</p>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">定义和用法</div><div class="line"> setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。</div><div class="line"> setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。</div><div class="line"> 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。</div><div class="line"></div><div class="line">语法</div><div class="line"> setInterval(code,millisec[,<span class="string">"lang"</span>])</div><div class="line">参数 描述</div><div class="line">code 必需。要调用的函数或要执行的代码串。</div><div class="line">millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。</div><div class="line">返回值</div><div class="line"> 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。</div></pre></td></tr></table></figure>
<p>但是看完这个并没有什么乱用，我觉得我需要一些更加底层的信息。<br>但是一时没找到（其实是懒），就考虑从其他部分去解决问题。</p>
<h2 id="问题解决"><a href="#问题解决" class="headerlink" title="问题解决"></a>问题解决</h2><p>既然i的取值是1-9时，返回2-10，那么我试试i取值0-8：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">document</span>.body.innerHTML += <span class="string">"<ul></ul>"</span>;</div><div class="line"> <span class="keyword">var</span> oUl =<span class="built_in">document</span>.getElementsByTagName(<span class="string">"ul"</span>)[<span class="number">0</span>];</div><div class="line"> <span class="keyword">var</span> i= <span class="number">0</span>;</div><div class="line"> <span class="keyword">var</span> timer1 =setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">if</span> (i<=<span class="number">8</span>) {</div><div class="line"> oUl.innerHTML += <span class="string">"<li></li>"</span>;</div><div class="line"> <span class="keyword">var</span> oLi=<span class="built_in">document</span>.getElementsByTagName(<span class="string">"li"</span>)[i];</div><div class="line"> <span class="keyword">var</span> j= <span class="number">1</span>;</div><div class="line"> <span class="keyword">var</span> timer2 = setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">if</span> (j<=i) {</div><div class="line"> <span class="keyword">var</span> str = i+<span class="string">"*"</span>+j+<span class="string">"="</span>+i*j;</div><div class="line"> oLi.innerHTML += <span class="string">"<span>"</span>+ str +<span class="string">"</span>"</span>;</div><div class="line"> j ++;</div><div class="line"> }</div><div class="line"> <span class="keyword">else</span>{</div><div class="line"> clearInterval(timer2);</div><div class="line"> }</div><div class="line"></div><div class="line"> },<span class="number">500</span>);</div><div class="line"> i ++;</div><div class="line"> }</div><div class="line"> <span class="keyword">else</span>{</div><div class="line"> clearInterval(timer1);</div><div class="line"> }</div><div class="line"> },<span class="number">4500</span>);</div><div class="line">};</div></pre></td></tr></table></figure>
<p>输出结果：</p>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="number">1</span>*<span class="number">1</span>=<span class="number">1</span></div><div class="line"><span class="number">2</span>*<span class="number">1</span>=<span class="number">22</span>*<span class="number">2</span>=<span class="number">4</span></div><div class="line"><span class="number">3</span>*<span class="number">1</span>=<span class="number">33</span>*<span class="number">2</span>=<span class="number">63</span>*<span class="number">3</span>=<span class="number">9</span></div><div class="line"><span class="number">4</span>*<span class="number">1</span>=<span class="number">44</span>*<span class="number">2</span>=<span class="number">84</span>*<span class="number">3</span>=<span class="number">124</span>*<span class="number">4</span>=<span class="number">16</span></div><div class="line"><span class="number">5</span>*<span class="number">1</span>=<span class="number">55</span>*<span class="number">2</span>=<span class="number">105</span>*<span class="number">3</span>=<span class="number">155</span>*<span class="number">4</span>=<span class="number">205</span>*<span class="number">5</span>=<span class="number">25</span></div><div class="line"><span class="number">6</span>*<span class="number">1</span>=<span class="number">66</span>*<span class="number">2</span>=<span class="number">126</span>*<span class="number">3</span>=<span class="number">186</span>*<span class="number">4</span>=<span class="number">246</span>*<span class="number">5</span>=<span class="number">306</span>*<span class="number">6</span>=<span class="number">36</span></div><div class="line"><span class="number">7</span>*<span class="number">1</span>=<span class="number">77</span>*<span class="number">2</span>=<span class="number">147</span>*<span class="number">3</span>=<span class="number">217</span>*<span class="number">4</span>=<span class="number">287</span>*<span class="number">5</span>=<span class="number">357</span>*<span class="number">6</span>=<span class="number">427</span>*<span class="number">7</span>=<span class="number">49</span></div><div class="line"><span class="number">8</span>*<span class="number">1</span>=<span class="number">88</span>*<span class="number">2</span>=<span class="number">168</span>*<span class="number">3</span>=<span class="number">248</span>*<span class="number">4</span>=<span class="number">328</span>*<span class="number">5</span>=<span class="number">408</span>*<span class="number">6</span>=<span class="number">488</span>*<span class="number">7</span>=<span class="number">568</span>*<span class="number">8</span>=<span class="number">64</span></div><div class="line"><span class="number">9</span>*<span class="number">1</span>=<span class="number">99</span>*<span class="number">2</span>=<span class="number">189</span>*<span class="number">3</span>=<span class="number">279</span>*<span class="number">4</span>=<span class="number">369</span>*<span class="number">5</span>=<span class="number">459</span>*<span class="number">6</span>=<span class="number">549</span>*<span class="number">7</span>=<span class="number">639</span>*<span class="number">8</span>=<span class="number">729</span>*<span class="number">9</span>=<span class="number">81</span></div></pre></td></tr></table></figure>
<p>所以，这个问题解决了，但是有一个问题还没有解决，所以这是一个坑。<br>先写下来。</p>
<h2 id="留下的坑"><a href="#留下的坑" class="headerlink" title="留下的坑"></a>留下的坑</h2><p style="color: red"><br>1. 为什么i取1-8才正确输出？而取1-9不行？<br><br>2. setInterval()到底是一个怎样的执行顺序？<br></p>]]></content>
<summary type="html">
<h2 id="问题情境"><a href="#问题情境" class="headerlink" title="问题情境"></a>问题情境</h2><ul>
<li>实现功能：逐个输出99乘法表</li>
<li>程序（js部分）：</li>
</ul>
</summary>
<category term="学习" scheme="http://www.aqiongbei.top/categories/%E5%AD%A6%E4%B9%A0/"/>
<category term="javascript" scheme="http://www.aqiongbei.top/tags/javascript/"/>
<category term="setInterval()" scheme="http://www.aqiongbei.top/tags/setInterval/"/>
<category term="坑" scheme="http://www.aqiongbei.top/tags/%E5%9D%91/"/>
<category term="没填的坑" scheme="http://www.aqiongbei.top/tags/%E6%B2%A1%E5%A1%AB%E7%9A%84%E5%9D%91/"/>
</entry>
<entry>
<title>关于事件绑定中遇到的一个小问题</title>
<link href="http://www.aqiongbei.top/2016/10/12/event-binding/"/>
<id>http://www.aqiongbei.top/2016/10/12/event-binding/</id>
<published>2016-10-12T12:26:40.000Z</published>
<updated>2016-10-13T00:43:00.384Z</updated>
<content type="html"><![CDATA[<h2 id="问题情境"><a href="#问题情境" class="headerlink" title="问题情境"></a>问题情境</h2><ul>
<li>实现功能：三个按钮，点击按钮弹出对应按钮的索引</li>
<li>程序(js部分)：</li>
</ul>
<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> aBtn =<span class="built_in">document</span>.getElementsByTagName(<span class="string">"input"</span>);</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = aBtn.length - <span class="number">1</span>; i >= <span class="number">0</span>; i--) {</div><div class="line"> aBtn[i].onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> alert(i);</div><div class="line"> };</div><div class="line"> }</div><div class="line">};</div></pre></td></tr></table></figure>
<p>按照我原来的思路来讲，这么些就可以达到目的了。<br>但事实并非如此。<br>点击按钮，结果是这样的：</p>
<pre><code>无论点击哪个按钮，弹出的都是-1
</code></pre><p>是滴，我们遇到问题了。<br>可是，从程序中，似乎看不到问题的所在。<br>那么问题在哪里呢？<br>抛开这问题，来看一个东西：</p>
<h2 id="相关知识"><a href="#相关知识" class="headerlink" title="相关知识"></a>相关知识</h2><p>我们怎么使用一个函数呢</p>
<ol>
<li>定义</li>
<li>调用</li>
</ol>
<p>这个很简单。<br>我们在回到问题</p>
<h2 id="问题所在"><a href="#问题所在" class="headerlink" title="问题所在"></a>问题所在</h2><pre><code>在上面那个问题中，我们对每个aBtn进行了一个onclick事件的绑定，
在这里对每个btn定义了一个函数，在进行for循环时进行了这一切。
而这一切都只是定义，并没有调用，而且没有调用并不影响这个for循环的执行。
所以等我们点击按钮时，也就是调用时，for循环已经执行完成，这时候i=-1。
所以，弹出来的都是-1。
</code></pre><h2 id="问题解决"><a href="#问题解决" class="headerlink" title="问题解决"></a>问题解决</h2><blockquote>
<p>我们通过自定义属性来解决这一问题</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> aBtn =<span class="built_in">document</span>.getElementsByTagName(<span class="string">"input"</span>);</div><div class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = aBtn.length - <span class="number">1</span>; i >= <span class="number">0</span>; i--) {</div><div class="line"> aBtn[i].index =i; <span class="comment">//添加自定义属性</span></div><div class="line"> aBtn[i].onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="keyword">this</span>.index);</div><div class="line"> };</div><div class="line"> }</div><div class="line">};</div></pre></td></tr></table></figure>
<h2 id="问题拓展"><a href="#问题拓展" class="headerlink" title="问题拓展"></a>问题拓展</h2><blockquote>
<p>我们尝试将上面的</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log(<span class="keyword">this</span>.index);</div></pre></td></tr></table></figure>
<p>改为</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log(aBtn[i]);</div></pre></td></tr></table></figure>
<p>结果会报错。为什呢？</p>
<p>原因很简单，还是因为上面的问题。<br>当点击按钮时，循环已经结束，这时候i=-1。但是aBtn[-1]是不存在的的，所以会报错。</p>
<h2 id="问题总结"><a href="#问题总结" class="headerlink" title="问题总结"></a>问题总结</h2><p style="color: red">在进行事件绑定时一定要考虑这个函数调用的问题。<br>而且牢记，函数不调用不执行！</p>]]></content>
<summary type="html">
<h2 id="问题情境"><a href="#问题情境" class="headerlink" title="问题情境"></a>问题情境</h2><ul>
<li>实现功能：三个按钮，点击按钮弹出对应按钮的索引</li>
<li>程序(js部分)：</li>
</ul>
</summary>
<category term="学习" scheme="http://www.aqiongbei.top/categories/%E5%AD%A6%E4%B9%A0/"/>
<category term="javascript" scheme="http://www.aqiongbei.top/tags/javascript/"/>
<category term="event" scheme="http://www.aqiongbei.top/tags/event/"/>
</entry>
<entry>
<title>关于js中设置元素颜色的问题</title>
<link href="http://www.aqiongbei.top/2016/10/12/about-color-value-in-js/"/>
<id>http://www.aqiongbei.top/2016/10/12/about-color-value-in-js/</id>
<published>2016-10-12T12:24:58.000Z</published>
<updated>2016-10-13T00:43:05.033Z</updated>
<content type="html"><![CDATA[<h2 id="问题情境"><a href="#问题情境" class="headerlink" title="问题情境"></a>问题情境</h2><ul>
<li>实现功能：开关灯效果</li>
<li>程序（js部分）：</li>
</ul>
<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="built_in">document</span>.body.style.background=<span class="string">"#fff"</span>;</div><div class="line"> <span class="built_in">document</span>.body.onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">if</span> (<span class="built_in">document</span>.body.style.backgroundColor==<span class="string">"#fff)"</span>) {</div><div class="line"> <span class="built_in">document</span>.body.style.backgroundColor=<span class="string">"#000"</span>;</div><div class="line"> }</div><div class="line"> <span class="keyword">else</span>{</div><div class="line"> <span class="built_in">document</span>.body.style.backgroundColor=<span class="string">"#fff"</span>;</div><div class="line"> }</div><div class="line"> };</div><div class="line"> };</div></pre></td></tr></table></figure>
<p>按照原来的思路，这样就可以实现功能。<br>但是实际上这个程序没有任何反映，也不报错。</p>
<h2 id="相关知识-amp-amp-问题所在"><a href="#相关知识-amp-amp-问题所在" class="headerlink" title="相关知识&&问题所在"></a>相关知识&&问题所在</h2><p>上面的例子我们通过<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.body.style.backgroundColor);</div></pre></td></tr></table></figure></p>
<p>可以发现，输出值是这样的<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="string">"rgb(255, 255, 255)"</span></div></pre></td></tr></table></figure></p>
<p>这说明，在js里面，十六进制颜色会被转换成rgb格式。</p>
<h2 id="问题解决"><a href="#问题解决" class="headerlink" title="问题解决"></a>问题解决</h2><p>将颜色表示换成单词表示或者rgb表示</p>
<h2 id="问题拓展"><a href="#问题拓展" class="headerlink" title="问题拓展"></a>问题拓展</h2><p>在将问题颜色改为rgb表示时会发现，仍然没有作用</p>
<p>我们仔细查看上面的输出值可以发现<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="string">"rgb(255, 255, 255)"</span></div></pre></td></tr></table></figure></p>
<p>第二个255与第三个255前面是有空格的。</p>
<p>所以，在相应地方添加空格即可解决。</p>
<h2 id="问题总结"><a href="#问题总结" class="headerlink" title="问题总结"></a>问题总结</h2><p style="color: red">1. js中十六进制颜色会被转换为rgb形式</p><br><p style="color: red">2. js中rgb颜色表示时，需要在第二、第三个值前面加空格</p>
]]></content>
<summary type="html">
<h2 id="问题情境"><a href="#问题情境" class="headerlink" title="问题情境"></a>问题情境</h2><ul>
<li>实现功能：开关灯效果</li>
<li>程序（js部分）：</li>
</ul>
</summary>
<category term="学习" scheme="http://www.aqiongbei.top/categories/%E5%AD%A6%E4%B9%A0/"/>
<category term="javascript" scheme="http://www.aqiongbei.top/tags/javascript/"/>
<category term="color" scheme="http://www.aqiongbei.top/tags/color/"/>
</entry>
<entry>
<title>快，跟我走,老板喊你回去改PPT</title>
<link href="http://www.aqiongbei.top/2016/09/05/hurry-up-boss-is-coming/"/>
<id>http://www.aqiongbei.top/2016/09/05/hurry-up-boss-is-coming/</id>
<published>2016-09-05T13:45:30.000Z</published>
<updated>2016-09-05T14:50:11.754Z</updated>
<content type="html"><![CDATA[<p>快，跟我走,老板喊你回去改PPT<br><a id="more"></a><br><img src="../hurry-up-boss-is-coming/12.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/13.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/14.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/15.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/16.JPG" alt=""><br>PPT做完之后换台电脑就打不开了这是最恼人的。撇开技术问题不谈，总有那么几种情况下存在我们实在无力解决的版本兼容性问题。一般在office2003和office2007、office2010、office2013之间会发生这种情况，不要笑，因为的确还有一部分计算机在使用office2003。当用03版本打开高版本时就会出现打不开的情况。<br>这种情况下一般需要我们安装兼容包。但是很多时候处于很多原因，我们不愿意去安装兼容包。那怎么办呢？</p>
<p>既然用PPT不能打开，那么，为什么不换个工具打开呢？ 我们可以通过将PPT另存为图片、视频、pdf等格式可以避免这一问题，多种情况下保证内容能够被展示。<br><img src="../hurry-up-boss-is-coming/版本问题.png" alt=""><br>此外，在保存时我们还可以提前做好兼容性检测。及时对不兼容的地方进行调整，避免不必要的麻烦出现。<br><img src="../hurry-up-boss-is-coming/兼容性检查.png" alt=""><br><img src="../hurry-up-boss-is-coming/17.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/18.JPG" alt=""><br>我们只是想保留自己选择的字体对吧，那就不用换字体。<br>1、嵌入法：<br>将字体嵌入到PPT中，当然，这样会在一定程度上增加PPT体积。<br><img src="../hurry-up-boss-is-coming/字体嵌入.png" alt=""><br>2、文字转图片法：<br><img src="../hurry-up-boss-is-coming/PPTzitizhantu.gif" alt=""><br>将字体转为图片，但是对于后期再次编辑不太友好，而且，当ppt数量庞大时也不适用。<br>当然还有一种最直接的方法<br>3、直接安装法：<br>既然你没有我要用的字体，那就给你装一个呗。此法直接了当，但是，并不是所有人都同意你在人家电脑乱装字体的，所以，还得从自身做好准备。</p>
<p>关于字体还有一种情况不得不提，那就是老板要求更换PPT字体或者以上三条都不能满足。撇开老板的审美不谈，咱们来说怎么更换字体：<br>1、简单替换法<br><img src="../hurry-up-boss-is-coming/zititihuan1.gif" alt=""><br>很常见、简单的做法。但是也很明显，弊端在于不能大量处理。尤其是针对整个PPT替换字体的情况。<br>2、一键替换字体<br>这种方法的便捷之处在于可以一键替换同一字体，包括模版中的相同字体，省时省力。<br><img src="../hurry-up-boss-is-coming/zititihuan2.gif" alt=""><br>3、除此之外。母版之内也是可以一键替换字体的哦<br><img src="../hurry-up-boss-is-coming/zititihuan3.gif" alt=""><br>但是这种方法有他的局限性，只能是在主题字体之间替换。什么是主题字体呢？看图<br><img src="../hurry-up-boss-is-coming/主题字体.png" alt=""><br>4、此外，据说美化大师、PA插件、NT、OK等插件也可以一键替换字体，在此不做详细阐述。<br><img src="../hurry-up-boss-is-coming/19.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/20.JPG" alt=""><br>PPT做完之后大小很多时候是让然意外的而公司内部要求发邮件文件不能超过20M，所以，得压缩。学学这一招来压缩体积吧。<br>一、简单的图片压缩<br><img src="../hurry-up-boss-is-coming/图片压缩.png" alt=""><br>别小看这点设置，在一个以图片居多的ppt里面压缩效果惊人。<br>二、工具压缩<br>工具压缩不用介绍。这里推荐两款比较经常用的。<br>PPTminimizer和NXPowerLite<br>来做个直观的比较吧<br><img src="../hurry-up-boss-is-coming/10.JPG" alt=""><br>当PPT包含大量图片时，压缩率都很惊人，尤其是NXPowerLite。何止是惊人，简直就是惊人！压缩后大小比原来的零头都小！而简单图片压缩这么简单的一个设置也能带来这么大的变化，也是很受用的。至于非图片的情况下，简单图片压缩不太起作用，两个压缩工具则大致相当。相比较而言，NXPowerLite更优秀。值得推荐。<br><img src="../hurry-up-boss-is-coming/21.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/21.JPG" alt=""><br>动画，做PPT的时候你精心做好的动画到了老板那里老板一句不能有动画就要去掉，怎么办？难道要一个一个的再次精心“删除”？大可不必！不能有动画，那不给看不就行了。<br>简单的一个播放设置，动画就不会显示了。<br><img src="../hurry-up-boss-is-coming/动画.png" alt=""><br>此外，插件在这些时候似乎总是有用的。<br>比如NT插件、PA插件等。<br><img src="../hurry-up-boss-is-coming/2.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/3.JPG" alt=""><br>明明放的高清图却像打了马赛克一样模糊，PPT逼格分分钟拉下来。这怎么能忍？一点小改动来帮你解忧。<br><img src="../hurry-up-boss-is-coming/图片模糊.png" alt=""><br><img src="../hurry-up-boss-is-coming/4.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/5.JPG" alt=""><br>很多情况下老板是很在意公司logo或则slogan这些代表公司形象的东西，而在ppt里面这些一般是作为页眉页脚出现的每页内容页ppt都得有，一旦老板说你这里slogan错了一个字你就要把整个ppt的slogan改一遍。一般的方法是闷头就改，一页一页的去改，现在，你完全不需要这么去做了。因为，你可以这样。<br>通过母版来解决这类问题似乎是再合适不过了。在模板里面改动页眉页脚的logo或者slogan，一次改动，全篇适用。<br><img src="../hurry-up-boss-is-coming/母板.png" alt=""><br><img src="../hurry-up-boss-is-coming/6.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/7.JPG" alt=""><br>ppt做完之后最烦什么？最烦人家乱改你东西！！！所以，不管是出于这种很简单的防修改也好还是很严肃的版权问题也好下面的方法都适用。<br>给PPT修改加上权限密码，再也不用担心他人乱改PPT了。<br><img src="../hurry-up-boss-is-coming/版权.png" alt=""><br>如此一来，如果对方不知道密码，那么只能以只读方式打开。打开后菜单栏呈灰色，是不能编辑的状态。<br><img src="../hurry-up-boss-is-coming/只读.png" alt=""><br><img src="../hurry-up-boss-is-coming/8.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/9.JPG" alt=""><br><img src="../hurry-up-boss-is-coming/22.JPG" alt=""></p>
]]></content>
<summary type="html">
<p>快，跟我走,老板喊你回去改PPT<br>
</summary>
<category term="PPT" scheme="http://www.aqiongbei.top/categories/PPT/"/>
<category term="教程" scheme="http://www.aqiongbei.top/tags/%E6%95%99%E7%A8%8B/"/>
<category term="PPT" scheme="http://www.aqiongbei.top/tags/PPT/"/>
</entry>
<entry>
<title>细数最近干了啥</title>
<link href="http://www.aqiongbei.top/2016/09/05/what-s-going-on-those-days-2/"/>
<id>http://www.aqiongbei.top/2016/09/05/what-s-going-on-those-days-2/</id>
<published>2016-09-05T13:30:37.000Z</published>
<updated>2016-09-05T14:51:22.156Z</updated>
<summary type="html">
</summary>
<category term="随笔" scheme="http://www.aqiongbei.top/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="随笔" scheme="http://www.aqiongbei.top/tags/%E9%9A%8F%E7%AC%94/"/>
</entry>
<entry>
<title>hello Mr.Tree</title>
<link href="http://www.aqiongbei.top/2016/08/16/hello-Mr-Shu/"/>
<id>http://www.aqiongbei.top/2016/08/16/hello-Mr-Shu/</id>
<published>2016-08-16T14:54:34.000Z</published>
<updated>2016-08-16T15:33:07.911Z</updated>
<content type="html"><![CDATA[ <blockquote class="blockquote-center"><p>让别人决定你的命运，那不可悲吗<br>Hello Mr.Tree</p>
</blockquote>]]></content>
<summary type="html">
<blockquote class="blockquote-center"><p>让别人决定你的命运，那不可悲吗<br>Hello Mr.Tree</p>
</blockquote>
</summary>
<category term="随笔" scheme="http://www.aqiongbei.top/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="随笔" scheme="http://www.aqiongbei.top/tags/%E9%9A%8F%E7%AC%94/"/>
</entry>
<entry>
<title>在hexo上应用Next主题</title>
<link href="http://www.aqiongbei.top/2016/08/11/apply-Next-theme-on-hexo/"/>
<id>http://www.aqiongbei.top/2016/08/11/apply-Next-theme-on-hexo/</id>
<published>2016-08-11T10:51:07.000Z</published>
<updated>2016-08-11T20:42:43.651Z</updated>
<content type="html"><![CDATA[<blockquote>
<p>嫌弃hexo自带的主题？没事，刚好，我也嫌弃。那就换个主题吧。</p>
</blockquote>
<a id="more"></a>
<p>我用的Next主题，很简洁、淡雅的一款主题。主题安装这里介绍的很清楚。我就不再絮叨。移步<a href="http://theme-next.iissnan.com/" title="Next主题官方文档" target="_blank" rel="external">Next主题官方文档</a>。<br>我对主题进行了一些简单的自己觉得是优化的改动。</p>
<h2 id="字体大小"><a href="#字体大小" class="headerlink" title="字体大小"></a>字体大小</h2><h3 id="文章字体大小"><a href="#文章字体大小" class="headerlink" title="文章字体大小"></a>文章字体大小</h3><p>原主题文章字体是<code>14px</code>，太小了。我给改成<code>18px</code><br>文件地址：<code>F:\myBlog\themes\next\source\css\_variables\base.styl</code><br><figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">// Font size</div><div class="line">$font-size-base = 18px #16px-->18px</div><div class="line">$font-size-small = $font-size-base - 2px</div><div class="line">$font-size-smaller = $font-size-base - 4px</div><div class="line">$font-size-large = $font-size-base + 2px</div><div class="line">$font-size-larger = $font-size-base + 4px</div></pre></td></tr></table></figure></p>
<h3 id="代码块字体大小"><a href="#代码块字体大小" class="headerlink" title="代码块字体大小"></a>代码块字体大小</h3><p>将代码块字体由原有的14px–>16px<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">// Code & Code Blocks</div><div class="line">// --------------------------------------------------</div><div class="line"><span class="variable">$code</span>-font-family = <span class="variable">$font</span>-family-monospace </div><div class="line"><span class="variable">$code</span>-font-size = 16px <span class="comment">#14px-->16px</span></div><div class="line"><span class="variable">$code</span>-background = <span class="variable">$grey</span>-light</div><div class="line"><span class="variable">$code</span>-foreground = <span class="variable">$black</span>-light</div><div class="line"><span class="variable">$code</span>-border-radius = 6px</div></pre></td></tr></table></figure></p>
<p>代码块字体改成16px之后代码块会出现滚动条很难看，还要改代码块字体行高以此来保持整个代码块的美观。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">// Global line height</div><div class="line"><span class="variable">$line</span>-height-base = 2</div><div class="line"><span class="variable">$line</span>-height-code-block = 1.3 // Can<span class="string">'t be less than 1.3</span></div><div class="line"> #1.6-->1.3</div></pre></td></tr></table></figure></p>
<h3 id="修改导航菜单字体"><a href="#修改导航菜单字体" class="headerlink" title="修改导航菜单字体"></a>修改导航菜单字体</h3><p>导航菜单字体路径如下：<code>F:\myBlog\themes\next\source\css\_common\components\header</code><br>控制代码如下：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">a {</div><div class="line"> display: block;</div><div class="line"> font-size: 16px; <span class="comment">#我觉得16px挺合适的</span></div><div class="line"> text-transform: capitalize;</div><div class="line"> line-height: inherit;</div><div class="line"> border-bottom: 1px solid <span class="variable">$menu</span>-link-border;</div><div class="line"> transition-property: border-color;</div><div class="line"> the-transition();</div><div class="line"> &:hover { border-bottom-color: <span class="variable">$menu</span>-link-hover-border; }</div><div class="line"> }</div></pre></td></tr></table></figure></p>
<p>目前我所发现的、已经修改的就是这些了，以后再有更改的话会继续在这里更新。</p>
]]></content>
<summary type="html">
<blockquote>
<p>嫌弃hexo自带的主题？没事，刚好，我也嫌弃。那就换个主题吧。</p>
</blockquote>
</summary>
<category term="教程" scheme="http://www.aqiongbei.top/categories/%E6%95%99%E7%A8%8B/"/>
<category term="教程" scheme="http://www.aqiongbei.top/tags/%E6%95%99%E7%A8%8B/"/>
<category term="hexo" scheme="http://www.aqiongbei.top/tags/hexo/"/>
<category term="Next主题" scheme="http://www.aqiongbei.top/tags/Next%E4%B8%BB%E9%A2%98/"/>
</entry>
<entry>
<title>在Github上利用hexo搭建个人博客</title>
<link href="http://www.aqiongbei.top/2016/08/10/how-to-bulid-your-own-blog-by-hexo-and-github/"/>
<id>http://www.aqiongbei.top/2016/08/10/how-to-bulid-your-own-blog-by-hexo-and-github/</id>
<published>2016-08-10T05:29:51.000Z</published>
<updated>2016-08-11T10:41:20.151Z</updated>
<content type="html"><![CDATA[<blockquote>
<p>我的blog搭建完成了，中间也是很多曲折的，从不了解github，不知道hexo，不熟悉MarkDown语法，到成功完成自己的blog也是感触颇多。虽然网上这类教程还是挺多的，每篇都写的很详细，但是对于一个小白来说，还是觉得有很多地方跳跃性太大,不容易操作。所以我觉得有必要写这样的一篇教程。以此来帮助更多人。</p>
</blockquote>
<a id="more"></a>
<p><div style="border-right:4px solid red;padding:4px 14px;"><p style="color:red">我觉得你打算做这些之前先看下面的图，这些图是我自己总结出来的，有些地方可能不够准确，但对小白来讲我相信还是有帮助的，对于加深对接下里要做的事的理解还是有帮助的，更利于在某个环节出现了问题时解决问题。</p></div><br><img src="../how-to-bulid-your-own-blog-by-hexo-and-github/hexo.jpg" alt="利用Hexo在Github上搭建博客"><br><img src="../how-to-bulid-your-own-blog-by-hexo-and-github/hexo原理.jpg" alt="Hexo原理"></p>
<p></p><p style="color:red">声明：<br> 准备部分软件安装就不赘述了。直接从Git配置ssh开始</p><p></p>
<h2 id="Git连接ssh"><a href="#Git连接ssh" class="headerlink" title="Git连接ssh"></a>Git连接ssh</h2><p>由于我们没有进行过ssh连接配置，所以省去检查有没有ssh连接配置这一步，直接开始配置ssh<br>打开Git Bash</p>
<h3 id="设置Git的user-name和email："><a href="#设置Git的user-name和email：" class="headerlink" title="设置Git的user name和email："></a>设置Git的user name和email：</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">git config --global user.name <span class="string">"aqiongbei"</span> <span class="comment">#改成你的注册Github的用户名</span></div><div class="line">git config --global user.email <span class="string">"[email protected]"</span> <span class="comment">#改成你的注册Github的邮箱</span></div></pre></td></tr></table></figure>
<h3 id="生成SSH密钥："><a href="#生成SSH密钥：" class="headerlink" title="生成SSH密钥："></a>生成SSH密钥：</h3><p>生存密钥：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ssh-keygen -t rsa -C <span class="string">"[email protected]"</span> <span class="comment">#改成你注册Github的邮箱</span></div></pre></td></tr></table></figure></p>
<p>返回提示如下：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">$ ssh-keygen -t rsa -C <span class="string">"[email protected]"</span> <span class="comment">#改成你注册Github的邮箱</span></div><div class="line">Generating public/private rsa key pair.</div><div class="line">Enter file <span class="keyword">in</span> <span class="built_in">which</span> to save the key (/c/Users/neckpain/.ssh/id_rsa):<span class="comment">#直接回车</span></div><div class="line">Enter passphrase (empty <span class="keyword">for</span> no passphrase):<span class="comment">#直接回车</span></div><div class="line">Enter same passphrase again:<span class="comment">#直接回车</span></div><div class="line">Your identification has been saved <span class="keyword">in</span> /c/Users/neckpain/.ssh/id_rsa.<span class="comment">#生成的密钥</span></div><div class="line">Your public key has been saved <span class="keyword">in</span> /c/Users/neckpain/.ssh/id_rsa.pub. <span class="comment">#生成的公钥</span></div><div class="line">The key fingerprint is:</div><div class="line">e3:51:33:xx:xx:xx:xx:xxx:61:28:83:e2:81 [email protected]</div><div class="line"><span class="comment">#本机已完成ssh key设置，其存放路径为：c:/Users/neckpain/.ssh/下</span></div></pre></td></tr></table></figure></p>
<p>然后会提示，不用理，直接按回车，一共三次。<br>在<code>C:\Users\Neckpain\.ssh</code>得到 id_rsa 和 id_rsa.pub 文件，说明生成成功</p>
<h3 id="添加密钥到-Github"><a href="#添加密钥到-Github" class="headerlink" title="添加密钥到 Github"></a>添加密钥到 Github</h3><p>打开 Github，登录自己的账号后<br>点击自己的头像->settings->SSH Keys->Add SSH key<br>将本地 id_rsa.pub 中的内容粘贴到 Key 文本框中，随意输入一个 title，点击 Add Key 即可。</p>
<h3 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h3><p>Git里面继续输入<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">ssh -T [email protected]</div></pre></td></tr></table></figure></p>
<p>返回<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ ssh -T [email protected]</div><div class="line">Hi aqiongbei! You<span class="string">'ve successfully authenticated, but GitHub does not provide shell access.</span></div></pre></td></tr></table></figure></p>
<p>则说明验证成功。<br>然后开始安装Hexo</p>
<h2 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h2><p>以下部分在你想在本地搭建博客的<span style="color:red">文件夹内进行</span>(我这里是myBlog)。</p>
<h3 id="安装hexo-1"><a href="#安装hexo-1" class="headerlink" title="安装hexo"></a>安装hexo</h3><p><span style="color:red">进入文件夹</span>之后右键选择Git bash here，在打开的Git窗口输入<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install -g hexo-cli</div></pre></td></tr></table></figure></p>
<h3 id="新建一个网站"><a href="#新建一个网站" class="headerlink" title="新建一个网站"></a>新建一个网站</h3><p>安装 Hexo 完成后，<span style="color:red">在文件夹内</span>执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo init</div></pre></td></tr></table></figure></p>
<p>新建完成后，指定文件夹的目录如下：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">.</div><div class="line">├── _config.yml</div><div class="line">├── package.json</div><div class="line">├── scaffolds</div><div class="line">├── <span class="built_in">source</span></div><div class="line">| ├── _drafts</div><div class="line">| └── _posts</div><div class="line">└── themes</div></pre></td></tr></table></figure></p>
<h3 id="安装依赖包："><a href="#安装依赖包：" class="headerlink" title="安装依赖包："></a>安装依赖包：</h3><p>一段代码滚动之后输入<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install</div></pre></td></tr></table></figure></p>
<h3 id="生成静态页面"><a href="#生成静态页面" class="headerlink" title="生成静态页面"></a>生成静态页面</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo generate <span class="comment">#可简写为hexo g</span></div></pre></td></tr></table></figure>
<p>会出现类似以下反馈<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">$ hexo g</div><div class="line">INFO Start processing</div><div class="line">INFO Files loaded <span class="keyword">in</span> 865 ms</div><div class="line">INFO Deleted: categories/教程/hexo/index.html</div><div class="line">INFO Deleted: categories/教程/hexo/Github/index.html</div><div class="line">INFO Generated: atom.xml</div><div class="line">INFO Generated: search.xml</div><div class="line">INFO Generated: 2016/08/10/how-to-bulid-your-own-blog-by-hexo-and-github/index.html</div><div class="line">INFO Generated: index.html</div><div class="line">INFO Generated: categories/index.html</div><div class="line">INFO Generated: 2016/08/10/how-to-bulid-your-own-blog-by-hexo-and-github/hexo原理.jpg</div><div class="line">INFO Generated: 2016/08/10/how-to-bulid-your-own-blog-by-hexo-and-github/hexo.jpg</div><div class="line">INFO 11 files generated <span class="keyword">in</span> 943 ms</div></pre></td></tr></table></figure></p>
<p>都是以info开头的信息，是不会出现什么错误的，所以这个地方方不用担心。</p>
<h3 id="启动本地服务器"><a href="#启动本地服务器" class="headerlink" title="启动本地服务器"></a>启动本地服务器</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">hexo server <span class="comment">#可简写为hexo s/调试的时候用hexo s --debug</span></div></pre></td></tr></table></figure>
<p>出现下面的情况时<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ hexo s</div><div class="line">INFO Start processing</div><div class="line">INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.</div></pre></td></tr></table></figure></p>
<p>表明服务器启动成功，这时候打开<code>http://localhost:4000/</code>即可看到你的博客。这只是本地的blog，还需要部署到Github。</p>
<h2 id="部署到Github"><a href="#部署到Github" class="headerlink" title="部署到Github"></a>部署到Github</h2><p>部署仅需一条命令。但是得做些准备。</p>
<h3 id="修改-config-yml文件"><a href="#修改-config-yml文件" class="headerlink" title="修改_config.yml文件"></a>修改<code>_config.yml</code>文件</h3><p><span style="color:red">注意：<code>_config.yml</code>文件每个冒号后面空一格才能填值</span><br>_config.yml文件在blog文件夹的根目录下。<br>打开，然后找到这些字段<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line"> <span class="built_in">type</span>:</div></pre></td></tr></table></figure></p>
<p>然后修改这些字段类似这样（没有的字段就添加）：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line"> <span class="built_in">type</span>: git <span class="comment">#一定是git</span></div><div class="line"> repo: https://github.com/aqiongbei/aqiongbei.github.io.git <span class="comment">#你的Github pages仓库地址</span></div><div class="line"> branch: master <span class="comment">#可省略，省略的话默认master</span></div></pre></td></tr></table></figure></p>
<h3 id="安装-hexo-deployer-git"><a href="#安装-hexo-deployer-git" class="headerlink" title="安装 hexo-deployer-git"></a>安装 hexo-deployer-git</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install hexo-deployer-git --save</div></pre></td></tr></table></figure>
<h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><p>我有强迫症每次部署之前先clean一下<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">hexo clean <span class="comment">#清除缓存文件 (db.json) 和已生成的静态文件 (public)。（个人习惯，非必需）</span></div><div class="line">hexo g <span class="comment">#生成静态文件，每次改动之后都需要执行以下这个命令。</span></div><div class="line">hexo d <span class="comment">#这个才是真正的部署命令，这里用的都是简写形式</span></div></pre></td></tr></table></figure></p>
<p>git里面返回类似下面的信息的话就部署成功了<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">$ hexo d</div><div class="line">INFO Deploying: git</div><div class="line">INFO Clearing .deploy_git folder...</div><div class="line">INFO Copying files from public folder...</div><div class="line">[master 33e830e] Site updated: 2016-08-11 18:14:12</div><div class="line"> 4 files changed, 26 insertions(+), 8 deletions(-)</div><div class="line">Branch master <span class="built_in">set</span> up to track remote branch master from https://github.com/aqiongbei/aqiongbei.github.io.git.</div><div class="line">To https://github.com/aqiongbei/aqiongbei.github.io.git</div><div class="line"> d21e3c3..33e830e HEAD -> master</div><div class="line">INFO Deploy <span class="keyword">done</span>: git</div></pre></td></tr></table></figure></p>
<p>类似是指大部分信息是以<code>INFO</code>开头的。而且最后一条是<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">INFO Deploy <span class="keyword">done</span>: git</div></pre></td></tr></table></figure></p>
<p>这样表示部署成功了。而有时候会出现这样的<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line">$ hexo d</div><div class="line">INFO Deploying: git</div><div class="line">INFO Clearing .deploy_git folder...</div><div class="line">INFO Copying files from public folder...</div><div class="line">[master 04d9b2a] Site updated: 2016-08-11 18:16:51</div><div class="line"> 6 files changed, 12 insertions(+), 9 deletions(-)</div><div class="line">Fatal: TaskCanceledException encountered.</div><div class="line">bash: /dev/tty: No such device or address</div><div class="line">error: failed to execute prompt script (<span class="built_in">exit</span> code 1)</div><div class="line">fatal: could not <span class="built_in">read</span> Username <span class="keyword">for</span> <span class="string">'https://github.com'</span>: Invalid argument</div><div class="line">FATAL Something<span class="string">'s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html</span></div><div class="line">Error: Fatal: TaskCanceledException encountered.</div><div class="line">bash: /dev/tty: No such device or address</div><div class="line">error: failed to execute prompt script (exit code 1)</div><div class="line">fatal: could not read Username for 'https://github.com<span class="string">': Invalid argument</span></div><div class="line"></div><div class="line"> at ChildProcess.<anonymous> (F:\myBlog\node_modules\hexo-deployer-git\node_modules\hexo-util\lib\spawn.js:37:17)</div><div class="line"> at emitTwo (events.js:87:13)</div><div class="line"> at ChildProcess.emit (events.js:172:7)</div><div class="line"> at ChildProcess.cp.emit (F:\myBlog\node_modules\hexo-deployer-git\node_modules\hexo-util\node_modules\cross-spawn\lib\enoent.js:40:29)</div><div class="line"> at maybeClose (internal/child_process.js:827:16)</div><div class="line"> at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)</div><div class="line">FATAL Fatal: TaskCanceledException encountered.</div><div class="line">bash: /dev/tty: No such device or address</div><div class="line">error: failed to execute prompt script (exit code 1)</div><div class="line">fatal: could not read Username for 'https://github.com<span class="string">': Invalid argument</span></div><div class="line"></div><div class="line">Error: Fatal: TaskCanceledException encountered.</div><div class="line">bash: /dev/tty: No such device or address</div><div class="line">error: failed to execute prompt script (exit code 1)</div><div class="line">fatal: could not read Username for 'https://github.com<span class="string">': Invalid argument</span></div><div class="line"></div><div class="line"> at ChildProcess.<anonymous> (F:\myBlog\node_modules\hexo-deployer-git\node_modules\hexo-util\lib\spawn.js:37:17)</div><div class="line"> at emitTwo (events.js:87:13)</div><div class="line"> at ChildProcess.emit (events.js:172:7)</div><div class="line"> at ChildProcess.cp.emit (F:\myBlog\node_modules\hexo-deployer-git\node_modules\hexo-util\node_modules\cross-spawn\lib\enoent.js:40:29)</div><div class="line"> at maybeClose (internal/child_process.js:827:16)</div><div class="line"> at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)</div></pre></td></tr></table></figure></p>
<p>这种显示大量信息的八成就是出错了。看到<code>FATAL</code>、<code>error</code>就表明呵呵了。建议关掉本地预览页面(<a href="http://localhost:4000/" target="_blank" rel="external">http://localhost:4000/</a>) （我也不懂为什么，但是这样做有时候确实有效），然后hexo clean一下，重新生成静态文件，再次部署。<br>部署成功之后，打开yourusername.github.io看看是否已经有blog了？<br>enjoy it！<br>参考资料：</p>
<ul>
<li><a href="https://hexo.io/zh-cn/docs/" title="hexo中文指南" target="_blank" rel="external">hexo中文指南</a></li>
<li><a href="http://tengj.top/2016/02/22/hexo%E5%B9%B2%E8%B4%A7%E7%B3%BB%E5%88%97%EF%BC%9A%EF%BC%88%E4%B8%80%EF%BC%89hexo+gitHub%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%8B%AC%E7%AB%8B%E5%8D%9A%E5%AE%A2/" title="hexo+gitHub搭建个人独立博客" target="_blank" rel="external">hexo+gitHub搭建个人独立博客</a></li>
</ul>
]]></content>
<summary type="html">
<blockquote>
<p>我的blog搭建完成了，中间也是很多曲折的，从不了解github，不知道hexo，不熟悉MarkDown语法，到成功完成自己的blog也是感触颇多。虽然网上这类教程还是挺多的，每篇都写的很详细，但是对于一个小白来说，还是觉得有很多地方跳跃性太大,不容易操作。所以我觉得有必要写这样的一篇教程。以此来帮助更多人。</p>
</blockquote>
</summary>
<category term="教程" scheme="http://www.aqiongbei.top/categories/%E6%95%99%E7%A8%8B/"/>
<category term="教程" scheme="http://www.aqiongbei.top/tags/%E6%95%99%E7%A8%8B/"/>
<category term="hexo" scheme="http://www.aqiongbei.top/tags/hexo/"/>
<category term="Github" scheme="http://www.aqiongbei.top/tags/Github/"/>
</entry>
<entry>
<title>这些天都发生了什么</title>
<link href="http://www.aqiongbei.top/2016/08/08/what-s-up-those-day/"/>
<id>http://www.aqiongbei.top/2016/08/08/what-s-up-those-day/</id>
<published>2016-08-08T09:40:28.000Z</published>
<updated>2016-08-11T20:35:57.730Z</updated>
<content type="html"><![CDATA[<blockquote>
<p>自从8月4号注册了<a href="https://github.com/aqiongbei" title="aqiongbei's Github Repositories" target="_blank" rel="external">Github</a>以后我就就没怎么好好休息过，每天坐在电脑前十几个小时。每天熬夜到3-5点。精疲力尽。当然，我的JS也没怎么看。</p>
</blockquote>
<a id="more"></a>
<h1 id="8-4"><a href="#8-4" class="headerlink" title="8.4"></a>8.4</h1><p>注册Github之后开始装Git，Git官网下载的速度超级慢，挂上去几个小时都下不下来，无奈转战Github for Window。后又是各种找方法搭建自己的blog，查了很久发现两个工具，一个是jekyll一个是hexo。因为是最先查到jekll个人感觉不错，就先搞这个，结果，这玩意需要Ruby环境，还需要RubyGems，而且<a href="http://jekyll.bootcss.com/docs/installation/" title="Jekyll官方安装指南" target="_blank" rel="external">官方文档</a>建议在Linux、Unix、Mac OSX下配置。不建议在Windows环境下操作。这一点我是深有感触，简直了，这玩意儿在Windows下bug巨多，但就一个环境我就搞了将近两个小时，因为后面各种bug频出，也不知道怎么结局总以为是环境问题，每次都是重新配置环境。最后终于遇见了不可解决的不可知问题。放弃了。这个时候已经是8.5凌晨了。<br>从这件事我明白了以下几点：</p>
<ol>
<li>Github上几乎全是英文，你就是碰见一个中国人他们也是用英语写文档的。所以<code>学好英语很重要！</code></li>
<li>这次遇到的很多问题百度出来的答案很少，而且答案质量不高；有的甚至直接搜索不到结果，这个时候就需要Google了。这个时候算是明白了为什么那么多人喜欢Google。<code>Google的确比百度好用</code>。</li>
<li>Google出来的答案很多是英语的，但是还得硬着头皮上，再一次体会到<code>英语的总要性</code>。</li>
<li>解决问题国内用到的是<a href="https://segmentfault.com/" title="segmentfault" target="_blank" rel="external">SegmentFault</a>,国外还是<a href="http://stackoverflow.com/" title="stackoverflow" target="_blank" rel="external">Stack Overflow</a></li>
<li>如果你使用的是Windows，你想用jekyll我觉得你还是再考虑考虑吧，这玩意儿在Windows上坑太多了，用来解决问题的时间消耗太多，得不偿失。</li>
<li>因为jekyll没用成，所以参考资料只能贴一个<ul>
<li><a href="http://jekyll.bootcss.com/docs/installation/" title="Jekyll官方安装指南" target="_blank" rel="external">Jekyll官方安装文档</a></li>
</ul>
</li>
</ol>
<h1 id="8-5"><a href="#8-5" class="headerlink" title="8.5"></a>8.5</h1><p>8.5就开始转战hexo了。环境很好配置只需要Node.js和GIt。<br>具体的配置流程参考下一篇文章<a href="http://boziteng.win/2016/08/10/how-to-bulid-your-own-blog-by-hexo-and-github/" target="_blank" rel="external">在Github上利用hexo搭建自己的博客</a></p>
<h1 id="8-6-8-7"><a href="#8-6-8-7" class="headerlink" title="8.6-8.7"></a>8.6-8.7</h1><p>整个时间都在修改、调试blog配置。<br>具体的修改配置见文章</p>
<h1 id="8-8"><a href="#8-8" class="headerlink" title="8.8"></a>8.8</h1><p>8.7晚上发现了一个问题，查了很多资料没有解决，最后无奈重装了。一致折腾到8.8凌晨5点，装好了，但是问题依旧存在。具体问题见文章。<br>blog搞好了，接下来要好好利用这个blog。js继续，ppt教程继续。</p>
]]></content>
<summary type="html">
<blockquote>
<p>自从8月4号注册了<a href="https://github.com/aqiongbei" title="aqiongbei&#39;s Github Repositories">Github</a>以后我就就没怎么好好休息过，每天坐在电脑前十几个小时。每天熬夜到3-5点。精疲力尽。当然，我的JS也没怎么看。</p>
</blockquote>
</summary>
<category term="随笔" scheme="http://www.aqiongbei.top/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="随笔" scheme="http://www.aqiongbei.top/tags/%E9%9A%8F%E7%AC%94/"/>
</entry>
<entry>
<title>Hello World</title>
<link href="http://www.aqiongbei.top/2016/08/08/hello-world/"/>
<id>http://www.aqiongbei.top/2016/08/08/hello-world/</id>
<published>2016-08-07T16:11:30.560Z</published>
<updated>2016-08-07T19:24:18.744Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.<br><a id="more"></a></p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.<br>
</summary>
</entry>
</feed>