-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
974 lines (650 loc) · 101 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>yaobin's blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="yaobin's blog 记录个人生活及工作中的经验及技术分享">
<meta property="og:type" content="website">
<meta property="og:title" content="yaobin's blog">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="yaobin's blog">
<meta property="og:description" content="yaobin's blog 记录个人生活及工作中的经验及技术分享">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="yaobin's blog">
<meta name="twitter:description" content="yaobin's blog 记录个人生活及工作中的经验及技术分享">
<link rel="alternate" href="/atom.xml" title="yaobin's blog" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/css/favicon.ico">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="header-outer">
<div id="header-title">
<h3><img src="/css/images/logo.jpg" alt=""></h3>
<h1 id="logo-wrap">
<a href="/" id="logo">yaobin's blog</a>
</h1>
</div>
<div id="header-inner" class="inner">
<!-- <div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
</div> -->
<nav id="main-nav">
<ul>
<li><a class="main-nav-link" href="/">Home</a></li>
<li><a class="main-nav-link" href="/archives">Archives</a></li>
<li><a class="main-nav-link" href="/flex">flex</a></li>
<li><a class="main-nav-link" href="/binui/index.html">bin-vue</a></li>
</ul>
</nav>
<!-- <nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="搜索"></a>
</nav> -->
</div>
<div class="footer">
<div id="footer-info">
© 2016 yaobin and <a href="https://github.com/yaob421123" target="_blank">GitHub</a><br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a> and Theme by <a href="https://github.com/yaob421123/yaobinscape" target="_blank">yaobinscape</a>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-js页面播放音乐" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/06/02/js页面播放音乐/">js页面播放音乐</a>
</h1>
</header>
<div class="article-meta">
<a href="/2016/06/02/js页面播放音乐/" class="article-date">
<time datetime="2016-06-02T01:15:16.000Z" itemprop="datePublished">2016-06-02</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<h2 id="html"><a href="#html" class="headerlink" title="html"></a>html</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><a class="myMusic" title=""></span><br><span class="line"> <span class="circle play"></span></span><br><span class="line"></a></span><br></pre></td></tr></table></figure>
<h2 id="css"><a href="#css" class="headerlink" title="css"></a>css</h2><p>…</p>
<h2 id="js-导入jquery"><a href="#js-导入jquery" class="headerlink" title="js,导入jquery"></a>js,导入jquery</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> var musicSrc = 'bulid/images/music.mp3';</span><br><span class="line"> var audio = null;</span><br><span class="line"> function setAudio(){</span><br><span class="line"> audio = document.createElement('audio');</span><br><span class="line"> audio.src = musicSrc;</span><br><span class="line"> if(!audio){</span><br><span class="line"> audio.load(); //加载音乐</span><br><span class="line"> }else{</span><br><span class="line"> audio.play();</span><br><span class="line"> audio.loop = true; //循环播放</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> var musicBtn = $('.myMusic');</span><br><span class="line"> var $music = musicBtn.find('.circle');</span><br><span class="line"> //控制</span><br><span class="line"> musicBtn.off().on('click',function(){</span><br><span class="line"> if($music.hasClass('play')){ //如果已经播放，则暂停</span><br><span class="line"> audio && (audio.pause());</span><br><span class="line"> $music.addClass('pause').removeClass('play');</span><br><span class="line"> }else{</span><br><span class="line"> audio && (audio.play());</span><br><span class="line"> $music.addClass('play').removeClass('pause');</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> //页面加载后执行</span><br><span class="line"> window.onload = function(){</span><br><span class="line"> setAudio();</span><br><span class="line"> }</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-js判断当前页面是pc端，移动端，ipad" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/28/js判断当前页面是pc端，移动端，ipad/">js判断当前页面是pc端，移动端，ipad</a>
</h1>
</header>
<div class="article-meta">
<a href="/2016/04/28/js判断当前页面是pc端，移动端，ipad/" class="article-date">
<time datetime="2016-04-28T08:49:08.000Z" itemprop="datePublished">2016-04-28</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var _UA=navigator.userAgent;</span><br><span class="line">if(_UA.search('Windows')!=-1||(_UA.search('Mac')!=-1&&_UA.search('iPhone')==-1&&_UA.search('iPad')==-1)) {</span><br><span class="line"> //pc端</span><br><span class="line"></span><br><span class="line">}else if(_UA.search('iPad')!=-1||(_UA.search('Android')!=-1&&window.outerWidth>=768)){</span><br><span class="line"> //ipad</span><br><span class="line"></span><br><span class="line">}else if(_UA.search('iPhone')!=-1||(_UA.search('Android')!=-1&&window.outerWidth<768)){</span><br><span class="line"> //iphone</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-github-使用" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/27/github-使用/">github 使用</a>
</h1>
</header>
<div class="article-meta">
<a href="/2016/04/27/github-使用/" class="article-date">
<time datetime="2016-04-27T06:21:51.000Z" itemprop="datePublished">2016-04-27</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>github在windows系统下操作及流程介绍：</p>
<p>1.安装 <code>nodejs</code> 这是必备的，这里就不多说了。</p>
<p>2.安装<code>git</code>。如果不会百度吧。</p>
<p>3.如果是第一次在电脑上玩github需要配置 SSH才能访问github</p>
<h2 id="配置SSH"><a href="#配置SSH" class="headerlink" title="配置SSH"></a>配置SSH</h2><p>检查本机是否有ssh key设置</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ cd ~/.ssh 或 cd .ssh</span><br></pre></td></tr></table></figure>
<p>如果没有则提示： <code>No such file or directory</code></p>
<p>如果有则进入<code>~/.ssh</code>路径下</p>
<p>如果没有ssh key设置，进行一下操作：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C "[email protected]"</span><br></pre></td></tr></table></figure>
<p>会出现类似一下页面</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">Generating public/private rsa key pair.</span><br><span class="line"></span><br><span class="line">Enter file in which to save the key (/c/Users/xxxx_000/.ssh/id_rsa): #不填直接回车</span><br><span class="line"></span><br><span class="line">Enter passphrase (empty for no passphrase): #输入密码（可以为空）</span><br><span class="line"></span><br><span class="line">Enter same passphrase again: #再次确认密码（可以为空）</span><br><span class="line"></span><br><span class="line">Your identification has been saved in /c/Users/xxxx_000/.ssh/id_rsa. #生成的密钥</span><br><span class="line"></span><br><span class="line">Your public key has been saved in /c/Users/xxxx_000/.ssh/id_rsa.pub. #生成的公钥</span><br><span class="line"></span><br><span class="line">The key fingerprint is:</span><br><span class="line"></span><br><span class="line">e3:51:33:xx:xx:xx:xx:xxx:61:28:83:e2:81 [email protected]</span><br></pre></td></tr></table></figure>
<p>这样本机完成ssh key设置，其存放路径为：<code>c:/Users/xxxx_000/.ssh/</code>下。用文本打开 <code>id_rsa.pub</code> 复制所有内容。</p>
<h2 id="添加ssh-key到GItHub"><a href="#添加ssh-key到GItHub" class="headerlink" title="添加ssh key到GItHub"></a>添加ssh key到GItHub</h2><p>登录GitHub系统；点击右上角账号头像的 <code>“▼” → Settings → SSH kyes → Add SSH key</code></p>
<p>粘贴 <code>id_rsa.pub</code> 复制的内容。</p>
<p>这样 本机与github 链接已经完成了。</p>
<h2 id="配置账户"><a href="#配置账户" class="headerlink" title="配置账户"></a>配置账户</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name "your_username" #设置用户名</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.email "your_registered_github_Email" #设置邮箱地址(建议用注册giuhub的邮箱)</span><br></pre></td></tr></table></figure>
<p>测试ssh keys是否设置成功</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -T [email protected]</span><br></pre></td></tr></table></figure>
<p>如果出现 <code>Hi xxx! You've successfully authenticated, but GitHub does not provide shell access.</code> 出现词句话，说明设置成功。</p>
<h2 id="本地项目通过SSH-push到GitHub"><a href="#本地项目通过SSH-push到GitHub" class="headerlink" title="本地项目通过SSH push到GitHub"></a>本地项目通过SSH push到GitHub</h2><p>在github上创建一个示例仓库, 复制创建的仓库地址</p>
<p>打开git输入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone #仓库地址</span><br></pre></td></tr></table></figure>
<p>进入仓库项目目录</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cd #仓库项目目录名称</span><br></pre></td></tr></table></figure>
<p>随意增加文件或者项目</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git status #查看更改删除及增加的文件或者文件夹</span><br></pre></td></tr></table></figure>
<p>出现的红色字体表示你更改删除及增加的文件或者文件夹</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git add . #表示把要提交的文件添加到索引库中</span><br></pre></td></tr></table></figure>
<p>回头再 <code>git status</code> 发现更改删除及增加的文件或者文件夹 颜色变成绿色。这表示文件添加成功了</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git commit -m '#本次添加文件的描述信息'</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git pull origin master #合并master分之代码</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git push origin master #上传代码到master分之代码</span><br></pre></td></tr></table></figure>
<p>提示会要输入 用户名及密码。</p>
</div>
</div>
</article>
<article id="post-js-获取月份有多少天" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/27/js-获取月份有多少天/">js 获取月份有多少天</a>
</h1>
</header>
<div class="article-meta">
<a href="/2016/04/27/js-获取月份有多少天/" class="article-date">
<time datetime="2016-04-27T03:47:09.000Z" itemprop="datePublished">2016-04-27</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var date = new Date();</span><br><span class="line">var getFullYear = date.getFullYear();</span><br><span class="line">var getMonth = date.getMonth() + 1;</span><br><span class="line"></span><br><span class="line">var d = new Date(getFullYear, getMonth, 0);</span><br><span class="line">var num = d.getDate();</span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-在hexo中加入多说评论" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/04/25/在hexo中加入多说评论/">在hexo中加入多说评论</a>
</h1>
</header>
<div class="article-meta">
<a href="/2016/04/25/在hexo中加入多说评论/" class="article-date">
<time datetime="2016-04-25T01:30:55.000Z" itemprop="datePublished">2016-04-25</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>首先在根目录下_config.yml中增加duoshuo_shortname: 你站点的short_name，这里的short_name也就是你的二级域名。</p>
<p>如果使用的是默认的landscape主题只需要在themes\landscape\layout_partial\article.ejs 添加一下代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"> <% if (!index && post.comments && config.duoshuo_shortname){ %></span><br><span class="line"> <section id="comments"></span><br><span class="line"> <!-- 多说评论框 start --></span><br><span class="line"><div id="ds-thread" class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div></span><br><span class="line"><!-- 多说评论框 end --></span><br><span class="line"><!-- 多说公共JS代码 start (一个网页只需插入一次) --></span><br><span class="line"><script type="text/javascript"></span><br><span class="line">var duoshuoQuery = {short_name:"datoublog"};</span><br><span class="line"> (function() {</span><br><span class="line"> var ds = document.createElement('script');</span><br><span class="line"> ds.type = 'text/javascript';ds.async = true;</span><br><span class="line"> ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';</span><br><span class="line"> ds.charset = 'UTF-8';</span><br><span class="line"> (document.getElementsByTagName('head')[0] </span><br><span class="line"> || document.getElementsByTagName('body')[0]).appendChild(ds);</span><br><span class="line"> })();</span><br><span class="line"> </script></span><br><span class="line"><!-- 多说公共JS代码 end --></span><br><span class="line"> </section></span><br><span class="line"> <% } %></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-web-app自适应方案rem" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/03/29/web-app自适应方案rem/">web app自适应方案rem</a>
</h1>
</header>
<div class="article-meta">
<a href="/2016/03/29/web-app自适应方案rem/" class="article-date">
<time datetime="2016-03-29T01:08:51.000Z" itemprop="datePublished">2016-03-29</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>rem是CSS3新引进来的一个度量单位。支持Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+等浏览器。现在多在移动端上使用。</p>
<h3 id="方案一："><a href="#方案一：" class="headerlink" title="方案一："></a>方案一：</h3><p>css设置全局字体大小：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">html{font-size: 100px; }</span><br><span class="line">body{font-size: 0.14rem;}</span><br></pre></td></tr></table></figure>
<p>jquery计算当前浏览器全局字体大小：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(window).resize(function(){</span><br><span class="line"> $('html').css({'font-size':$(window).width()/3.2+"px"});</span><br><span class="line">});</span><br><span class="line">$(function(){ </span><br><span class="line"> $('html').css({'font-size':$(window).width()/3.2+"px"});</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>在使用过程中，假设是<code>640像素</code>的设计，测量宽度是 <code>20px</code>,css中对应尺寸是 <code>0.1rem</code>。</p>
<h3 id="方案二"><a href="#方案二" class="headerlink" title="方案二:"></a>方案二:</h3><p>css部分：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">html{</span><br><span class="line"> font-size: 1rem;</span><br><span class="line">}</span><br><span class="line">body{</span><br><span class="line"> font-size:0.24rem;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>jquery部分：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">$(window).resize(function(){</span><br><span class="line"> setRem(640);</span><br><span class="line">});</span><br><span class="line">$(function(){</span><br><span class="line"> setRem(640);</span><br><span class="line">})</span><br><span class="line">function setRem(maxWidth){</span><br><span class="line"> var sw = $(window).width();</span><br><span class="line"> var radio = sw/maxWidth>1?1:sw/maxWidth;</span><br><span class="line"> var perSize = radio*100 + 'px';</span><br><span class="line"> document.documentElement.style.fontSize=perSize;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><code>640</code>表示设计图纸宽度为<code>640像素</code>，在使用过程中，测量宽度是 <code>20px</code> ,css中对应尺寸是 <code>0.2rem</code>。</p>
</div>
</div>
</article>
<article id="post-jquery-禁止右键及复制" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/01/25/jquery-禁止右键及复制/">jquery 禁止右键及复制</a>
</h1>
</header>
<div class="article-meta">
<a href="/2016/01/25/jquery-禁止右键及复制/" class="article-date">
<time datetime="2016-01-25T01:07:30.000Z" itemprop="datePublished">2016-01-25</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>禁止右键的代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$('body').bind('contextmenu', function() {</span><br><span class="line"> return false;</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<p>禁止复制的代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$('body').bind("selectstart",function(){</span><br><span class="line"> return false;</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-css3透视perspective-3D图-3D长方体" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/11/04/css3透视perspective-3D图-3D长方体/">css3透视perspective,3D图(3D长方体)</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/11/04/css3透视perspective-3D图-3D长方体/" class="article-date">
<time datetime="2015-11-04T01:06:29.000Z" itemprop="datePublished">2015-11-04</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line"><!DOCTYPE html></span><br><span class="line"><html lang=<span class="string">"en"</span>></span><br><span class="line"><head></span><br><span class="line"> <meta charset=<span class="string">"UTF-8"</span>></span><br><span class="line"> <title>Document</title></span><br><span class="line"> <style></span><br><span class="line"> *{</span><br><span class="line"> margin:0;</span><br><span class="line"> padding:0;</span><br><span class="line"> }</span><br><span class="line"> body{</span><br><span class="line"> background-color:<span class="comment">#ccc;</span></span><br><span class="line"> }</span><br><span class="line"> .cube{</span><br><span class="line"> margin:100px auto;</span><br><span class="line"> width:200px;</span><br><span class="line"> height:200px;</span><br><span class="line"> perspective: 250px;</span><br><span class="line"> -webkit-perspective: 250px;</span><br><span class="line"> transform-style:preserve-3d;/*指定元素的子元素在3D空间内定位*/</span><br><span class="line"> -webkit-transform-style:preserve-3d;</span><br><span class="line"> perspective-origin: -100% -50%;/*指定用户从哪个方向看过来*/</span><br><span class="line"> -webkit-perspective-origin: -100% -50%;</span><br><span class="line"> }</span><br><span class="line"> .cube div{</span><br><span class="line"> display:block;</span><br><span class="line"> position:absolute;</span><br><span class="line"> width:100px;</span><br><span class="line"> height:100px;</span><br><span class="line"> line-height:100px;</span><br><span class="line"> font-size:30px;</span><br><span class="line"> text-align:center;</span><br><span class="line"> }</span><br><span class="line"> .front{</span><br><span class="line"> border:none;</span><br><span class="line"> background:rgba(0, 0, 0, 0.3);</span><br><span class="line"> transform:translateZ(50px);</span><br><span class="line"> -webkit-transform:translateZ(50px);</span><br><span class="line"> }</span><br><span class="line"> .back{</span><br><span class="line"> background:rgba(0, 225, 0, 1);</span><br><span class="line"> transform:translateZ(-50px);</span><br><span class="line"> -webkit-transform:translateZ(-50px);</span><br><span class="line"> }</span><br><span class="line"> .right{</span><br><span class="line"> background:rgba(196, 0, 0, 0.7);</span><br><span class="line"> transform:rotateY(90deg) translateZ(50px);</span><br><span class="line"> -webkit-transform:rotateY(90deg) translateZ(50px);</span><br><span class="line"> }</span><br><span class="line"> .left{</span><br><span class="line"> background:rgba(0, 0, 196, 0.7);</span><br><span class="line"> transform:rotateY(-90deg) translateZ(50px);</span><br><span class="line"> -webkit-transform:rotateY(-90deg) translateZ(50px);</span><br><span class="line"> }</span><br><span class="line"> .top{</span><br><span class="line"> background:rgba(196, 196, 0, 0.7);</span><br><span class="line"> transform:rotateX(90deg) translateZ(50px);</span><br><span class="line"> -webkit-transform:rotateX(90deg) translateZ(50px);</span><br><span class="line"> }</span><br><span class="line"> .bottom{</span><br><span class="line"> background:rgba(196, 0, 196, 0.7);</span><br><span class="line"> transform:rotateX(90deg) translateZ(50px);</span><br><span class="line"> -webkit-transform:rotateX(-90deg) translateZ(50px);</span><br><span class="line"> }</span><br><span class="line"> </style></span><br><span class="line"></head></span><br><span class="line"><body></span><br><span class="line"> <div class=<span class="string">"cube"</span>></span><br><span class="line"> <div class=<span class="string">"front"</span>>1</div></span><br><span class="line"> <div class=<span class="string">"back"</span>>2</div></span><br><span class="line"> <div class=<span class="string">"right"</span>>3</div></span><br><span class="line"> <div class=<span class="string">"left"</span>>4</div></span><br><span class="line"> <div class=<span class="string">"top"</span>>5</div></span><br><span class="line"> <div class=<span class="string">"bottom"</span>>6</div></span><br><span class="line"> </div></span><br><span class="line"></body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-html5移动初模板" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/10/23/html5移动初模板/">html5移动初模板</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/10/23/html5移动初模板/" class="article-date">
<time datetime="2015-10-23T01:05:01.000Z" itemprop="datePublished">2015-10-23</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><!DOCTYPE html></span><br><span class="line"><html></span><br><span class="line"><head></span><br><span class="line"> <meta charset="UTF-8"></span><br><span class="line"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"></span><br><span class="line"> <meta name="format-detection" content="telephone=no, email=no"/></span><br><span class="line"> <meta name="renderer" content="webkit"></span><br><span class="line"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></span><br><span class="line"> <title>document</title></span><br><span class="line"> <meta name="keywords" content=""></span><br><span class="line"> <meta name="description" content=""></span><br><span class="line"></head></span><br><span class="line"><body></span><br><span class="line"> </span><br><span class="line"></body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-javerscript-获取class" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/10/21/javerscript-获取class/">javerscript 获取class</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/10/21/javerscript-获取class/" class="article-date">
<time datetime="2015-10-21T01:03:22.000Z" itemprop="datePublished">2015-10-21</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line">var getByClass = function (oParent, cname) {</span><br><span class="line"> if (oParent == null) {</span><br><span class="line"> oParent = document;</span><br><span class="line"> }</span><br><span class="line"> if (oParent.getElementsByClassName) {</span><br><span class="line"> return oParent.getElementsByClassName(cname);</span><br><span class="line"> } else {</span><br><span class="line"> var all = oParent.getElementsByTagName("*");</span><br><span class="line"> var j = all.length;</span><br><span class="line"> var theClass = new RegExp("(^|\\s)" + cname + "(\\s|$)");</span><br><span class="line"> var result = new Array();</span><br><span class="line"> for (var i = 0; i < j; i++) {</span><br><span class="line"> var allClass = all[i].className;</span><br><span class="line"> if (theClass.test(allClass)) {</span><br><span class="line"> result.push(all[i])</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return result;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></script></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-复选框全选与反选" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/10/19/复选框全选与反选/">复选框全选与反选</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/10/19/复选框全选与反选/" class="article-date">
<time datetime="2015-10-19T01:01:28.000Z" itemprop="datePublished">2015-10-19</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><!DOCTYPE html></span><br><span class="line"><html lang="en"></span><br><span class="line"><head></span><br><span class="line"> <meta charset="UTF-8"></span><br><span class="line"> <title>Document</title></span><br><span class="line"> <script src="js/jquery-2.1.1.min.js"></script></span><br><span class="line"> <script></span><br><span class="line"> $(document).ready(function(){</span><br><span class="line"> $("#CheckAll").on("change",function(){</span><br><span class="line"> if($("#CheckAll").prop("checked")){</span><br><span class="line"> $('input[name=subBox]').prop('checked', true); </span><br><span class="line"> }else{</span><br><span class="line"> $('input[name=subBox]').prop('checked', false); </span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> $(".chec")</span><br><span class="line"> });</span><br><span class="line"> </script></span><br><span class="line"></head></span><br><span class="line"><body></span><br><span class="line"> <div class="check"> </span><br><span class="line"> <input id="CheckAll" type="checkbox" />全选 </span><br><span class="line"> <input name="subBox" type="checkbox" /></span><br><span class="line"> <input name="subBox" type="checkbox" /></span><br><span class="line"> <input name="subBox" type="checkbox" /></span><br><span class="line"> <input name="subBox" type="checkbox" /></span><br><span class="line"> </div></span><br><span class="line"> <input id="btn" type="button" value="按钮" /></span><br><span class="line"></body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-AngularJS-购物车简单案例" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/10/17/AngularJS-购物车简单案例/">AngularJS 购物车简单案例</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/10/17/AngularJS-购物车简单案例/" class="article-date">
<time datetime="2015-10-17T09:16:19.000Z" itemprop="datePublished">2015-10-17</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br></pre></td><td class="code"><pre><span class="line"><!DOCTYPE html></span><br><span class="line"><html></span><br><span class="line"> <head></span><br><span class="line"> <meta charset = "utf-8"></span><br><span class="line"> <script type="text/javascript" src = "js/angular.js"></script></span><br><span class="line"> <style type="text/css"></span><br><span class="line"> .item{</span><br><span class="line"> height: 200px;</span><br><span class="line"> width:100px;</span><br><span class="line"> margin:5px;</span><br><span class="line"> border:1px solid #ccc;</span><br><span class="line"> float:left;</span><br><span class="line"> }</span><br><span class="line"> </style></span><br><span class="line"> </head></span><br><span class="line"> <body ng-app = "mapp" ng-controller = "mctrl"></span><br><span class="line"> <!--</span><br><span class="line"> <div class = "list"></span><br><span class="line"> <div class = "item" ng-repeat = "item in items"></span><br><span class="line"> <p class = "item-name"><span>商品名:</span>{{item.name}}</p></span><br><span class="line"> <p class = "item-price"><span>价格:</span>{{item.price|currency:"￥"}}</p></span><br><span class="line"> <input type = "button" ng-click = "buy($index)" value = "购买"></span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> --></span><br><span class="line"> <div class = "item-car"></span><br><span class="line"> <p ng-repeat = "item in items"></span><br><span class="line"> <span>{{item.name}}</span></span><br><span class="line"> <span>{{item.price|currency:"单价"}}</span></span><br><span class="line"> <input type = "button" value = "-" ng-click = "minus($index)"/></span><br><span class="line"> <input type = "text" ng-model = "varlist.itemNum[$index]"></span><br><span class="line"> <input type = "button" value = "+" ng-click = "add($index)"/></span><br><span class="line"> <span>单件总价:{{item.price*varlist.itemNum[$index]|currency:"￥"}}</span></span><br><span class="line"> </p></span><br><span class="line"> <p>总价：{{varlist.total|number:2}}</p></span><br><span class="line"> </div></span><br><span class="line"> <span style="background-color: #339966;"></span></span><br><span class="line"> <script type="text/javascript"></span><br><span class="line"> var app = angular.module("mapp", []);</span><br><span class="line"> app.controller("mctrl", function($scope) {</span><br><span class="line"> // 数据源</span><br><span class="line"> $scope.items = [{</span><br><span class="line"> "name": "王老吉",</span><br><span class="line"> "price": 4</span><br><span class="line"> }, {</span><br><span class="line"> "name": "老干妈",</span><br><span class="line"> "price": 7.5</span><br><span class="line"> }, {</span><br><span class="line"> "name": "臭豆腐",</span><br><span class="line"> "price": 7.32</span><br><span class="line"> }, {</span><br><span class="line"> "name": "饼干",</span><br><span class="line"> "price": 22</span><br><span class="line"> }, ];</span><br><span class="line"> var len = $scope.items.length;</span><br><span class="line"> var arr = [];</span><br><span class="line"> // 循环为数组赋值</span><br><span class="line"> for (var i = 0; i < len; i++) {</span><br><span class="line"> arr[i] = 0;</span><br><span class="line"> }</span><br><span class="line"> // 检测是否变化，为了总价能够改变</span><br><span class="line"> $scope.$watch("varlist.itemNum", function() {</span><br><span class="line"> getTotal();</span><br><span class="line"> }, true);</span><br><span class="line"> // 定义变量</span><br><span class="line"> $scope.varlist = {</span><br><span class="line"> itemNum: arr,</span><br><span class="line"> total: 0</span><br><span class="line"> }</span><br><span class="line"> // 购物的时候操作</span><br><span class="line"> $scope.buy = function($index) {</span><br><span class="line"> $scope.varlist.itemNum[$index]++;</span><br><span class="line"> getTotal();</span><br><span class="line"> }</span><br><span class="line"> // -----</span><br><span class="line"> $scope.minus = function($index) {</span><br><span class="line"> if ($scope.varlist.itemNum[$index] == 0) {</span><br><span class="line"> return;</span><br><span class="line"> } else {</span><br><span class="line"> $scope.varlist.itemNum[$index]--;</span><br><span class="line"> getTotal();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> // ++++</span><br><span class="line"> $scope.add = function($index) {</span><br><span class="line"> $scope.varlist.itemNum[$index]++;</span><br><span class="line"> getTotal();</span><br><span class="line"> }</span><br><span class="line"> // 计算总价</span><br><span class="line"> var getTotal = function($index) {</span><br><span class="line"> $scope.varlist.total = 0;</span><br><span class="line"> for (var j = 0; j < len; j++) {</span><br><span class="line"> $scope.varlist.total = $scope.varlist.total + $scope.varlist.itemNum[j] * $scope.items[j].price;</span><br><span class="line"> }</span><br><span class="line"> return $scope.varlist.total;</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> </script></span><br><span class="line"> <span style="background-color: #339966;"></span></span><br><span class="line"> </body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-转-图片上传的demo，支持移动，缩放，裁剪" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/10/13/转-图片上传的demo，支持移动，缩放，裁剪/">[转]图片上传的demo，支持移动，缩放，裁剪</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/10/13/转-图片上传的demo，支持移动，缩放，裁剪/" class="article-date">
<time datetime="2015-10-13T09:14:35.000Z" itemprop="datePublished">2015-10-13</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>某大神写的图片上传的demo</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><!doctype html></span><br><span class="line"><html></span><br><span class="line"><head></span><br><span class="line"> <link href="/domo/cropper.min.css" rel="stylesheet"></span><br><span class="line"> <script src="/domo/lrz.bundle.js"></script></span><br><span class="line"> <script src="/domo/cropper.min.js"></script></span><br><span class="line"></head></span><br><span class="line"><body></span><br><span class="line"><h1>Upload Demo</h1></span><br><span class="line"><input type="file" id='input'></span><br><span class="line"><button id="crop">Crop</button></span><br><span class="line"><div id="img-preview"></span><br><span class="line"> <img src="" id="showImage" alt=""/></span><br><span class="line"></div></span><br><span class="line"><script></span><br><span class="line"></span><br><span class="line"> var $ = function(el){</span><br><span class="line"> return document.querySelector(el);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> var result = $('#img-preview'),</span><br><span class="line"> preview = $('#showImage'),</span><br><span class="line"> cropOption = {</span><br><span class="line"> aspectRatio: 1 / 1,</span><br><span class="line"> guides: false,</span><br><span class="line"> cropBoxResizable: false,</span><br><span class="line"> cropBoxMovable: false,</span><br><span class="line"> dragCrop: false,</span><br><span class="line"> minContainerWidth: 200,</span><br><span class="line"> minContainerHeight: 200</span><br><span class="line"> },</span><br><span class="line"> cropper = null;</span><br><span class="line"></span><br><span class="line"> // 预览</span><br><span class="line"> $('#input').onchange = function (e) {</span><br><span class="line"> var file = this.files[0];</span><br><span class="line"> lrz(file,{width: 600})</span><br><span class="line"> .then(function (rst) {</span><br><span class="line"> preview.style.display = 'block';</span><br><span class="line"> preview.onload = function () {</span><br><span class="line"> cropper = new Cropper(preview,cropOption);</span><br><span class="line"> };</span><br><span class="line"> preview.src = rst.base64;</span><br><span class="line"> })</span><br><span class="line"> .catch(function (err) {</span><br><span class="line"></span><br><span class="line"> })</span><br><span class="line"> .always(function () {</span><br><span class="line"></span><br><span class="line"> });</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> // 裁剪</span><br><span class="line"> $('#crop').onclick = function(){</span><br><span class="line"> var img = new Image();</span><br><span class="line"> img.onload = function () {</span><br><span class="line"> $('body').appendChild(img);</span><br><span class="line"> // 销毁</span><br><span class="line"> cropper.destroy();</span><br><span class="line"> preview.style.display = 'none';</span><br><span class="line"> };</span><br><span class="line"> img.src = cropper</span><br><span class="line"> .getCroppedCanvas(cropOption, {</span><br><span class="line"> width: 200,</span><br><span class="line"> height: 200</span><br><span class="line"> })</span><br><span class="line"> .toDataURL("image/jpeg", 0.9);</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"></script></span><br><span class="line"></body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-js中cookie的使用" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/10/10/js中cookie的使用/">js中cookie的使用</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/10/10/js中cookie的使用/" class="article-date">
<time datetime="2015-10-10T09:10:53.000Z" itemprop="datePublished">2015-10-10</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>在网站中，很多地方需要使用到cookie，例如用户登录状态，用户下次访问时，保存上一次操作状态等。 cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。</p>
<p>cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：</p>
<ul>
<li>cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；</li>
<li>cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；</li>
<li>cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；</li>
<li>cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。</li>
</ul>
<p>下面是js设置网站cookie和读取网站cookie的简单用法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">//读取cookie</span><br><span class="line">var res = document.cookie.substring(5);</span><br><span class="line">//alert(res); //输出：www.yaobblog.com</span><br><span class="line"></span><br><span class="line">//判断浏览器是都有当前网站cookie信息</span><br><span class="line">if(res != "www.yaobblog.com"){</span><br><span class="line"> </span><br><span class="line"> //添加 cookie</span><br><span class="line"> var oDate = new Date();</span><br><span class="line"> oDate.setDate(oDate.getDate + 30); //设置30天以后</span><br><span class="line"></span><br><span class="line"> //设置网站cookie 30天后失效</span><br><span class="line"> document.cookie = "name=www.yaobblog.com;expires=" + oDate; </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-前端构建工具gulp入门教程" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/09/28/前端构建工具gulp入门教程/">前端构建工具gulp入门教程</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/09/28/前端构建工具gulp入门教程/" class="article-date">
<time datetime="2015-09-28T08:14:41.000Z" itemprop="datePublished">2015-09-28</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<h3 id="第1步：安装Node"><a href="#第1步：安装Node" class="headerlink" title="第1步：安装Node"></a>第1步：安装Node</h3><p>首先，最基本也最重要的是，我们需要搭建node环境。访问 nodejs.org，然后点击大大的绿色的 install 按钮，下载完成后直接运行程序，就一切准备就绪。npm会随着安装包一起安装，稍后会用到它。</p>
<p>为了确保Node已经正确安装，我们执行几个简单的命令。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure>
<p>因为国内访问外网都很慢，甚至不能访问！</p>
<p>淘宝针对国内下载npm库缓慢的问题，使用建立自己的cnpm库，可以很方便使用在公司内部使用，命令如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br><span class="line">cnpm -v</span><br></pre></td></tr></table></figure>
<p>如果这命令没有得到返回，可能node就没有安装正确，进行重装。安装淘宝镜像后，以后下载npm库，都用cnpm代替，下载会快很多。</p>
<h3 id="第2步：安装gulp"><a href="#第2步：安装gulp" class="headerlink" title="第2步：安装gulp"></a>第2步：安装gulp</h3><p>首先我们要全局安装一遍：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install -g gulp</span><br></pre></td></tr></table></figure>
<p>运行时注意查看命令行有没有错误信息，安装完成后，你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp -v</span><br></pre></td></tr></table></figure>
<p>接着我们要进去到项目的根目录再安装一遍</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install gulp --save-dev</span><br></pre></td></tr></table></figure>
<h3 id="第3步：新建gulpfile-js文件"><a href="#第3步：新建gulpfile-js文件" class="headerlink" title="第3步：新建gulpfile.js文件"></a>第3步：新建gulpfile.js文件</h3><ul>
<li>sass的编译（gulp-sass）</li>
<li>自动添加css前缀（gulp-autoprefixer）</li>
<li>压缩css（gulp-minify-css）</li>
<li>js代码校验（gulp-jshint）</li>
<li>合并js文件（gulp-concat）</li>
<li>压缩js代码（gulp-uglify）</li>
<li>压缩图片（gulp-imagemin）</li>
<li>自动刷新页面（gulp-livereload）</li>
<li>图片缓存，只有图片替换了才压缩（gulp-cache）</li>
<li>更改提醒（gulp-notify）</li>
</ul>
<p>安装这些插件需要运行如下命令（也可以拆开单独安装）：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev</span><br></pre></td></tr></table></figure>
<p>接着我们要创建一个gulpfile.js在根目录下，gulp只有四个API：<br>task，watch，src，和 dest</p>
<ul>
<li><strong>task</strong>这个API用来创建任务，在命令行下可以输入 gulp test 来执行test的任务。</li>
<li><strong>watch</strong>这个API用来监听任务。</li>
<li><strong>src</strong>这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss, vender.scss]，也可以是正则表达式/<em>*/</em>.scss。</li>
<li><strong>dest</strong>这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。</li>
</ul>
<h3 id="第4步：编辑gulpfile-js文件"><a href="#第4步：编辑gulpfile-js文件" class="headerlink" title="第4步：编辑gulpfile.js文件"></a>第4步：编辑gulpfile.js文件</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br></pre></td><td class="code"><pre><span class="line">//加载插件</span><br><span class="line">var gulp = require('gulp'),</span><br><span class="line"> sass = require('gulp-sass'),//sass的编译</span><br><span class="line"> autoprefixer = require('gulp-autoprefixer'),//使用Autoprefixer来补全浏览器兼容的css</span><br><span class="line"> minifycss = require('gulp-minify-css'),//压缩css</span><br><span class="line"> jshint = require('gulp-jshint'),//js代码校验</span><br><span class="line"> uglify = require('gulp-uglify'),//压缩js代码</span><br><span class="line"> imagemin = require('gulp-imagemin'),//压缩图片</span><br><span class="line"> rename = require('gulp-rename'),</span><br><span class="line"> concat = require('gulp-concat'),//合并js文件</span><br><span class="line"> notify = require('gulp-notify'),</span><br><span class="line"> cache = require('gulp-cache'),//图片缓存，只有图片替换了才压缩</span><br><span class="line"> livereload = require('gulp-livereload'),//自动刷新页面</span><br><span class="line"> watch = require('gulp-watch');</span><br><span class="line"></span><br><span class="line">// 编译sass、自动添加css前缀和压缩。Styles任务</span><br><span class="line">gulp.task('styles', function () {</span><br><span class="line"> return gulp.src('stylesheets/*.scss')</span><br><span class="line"> .pipe(sass())</span><br><span class="line"> .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))//添加前缀</span><br><span class="line"> .pipe(gulp.dest('assets/css/'))//保存未压缩文件到我们指定的目录下面</span><br><span class="line"> .pipe(rename({</span><br><span class="line"> suffix: '.min'//给文件添加.min后缀</span><br><span class="line"> }))</span><br><span class="line"> .pipe(minifycss())//压缩样式文件</span><br><span class="line"> .pipe(gulp.dest('assets/css/'))//输出压缩文件到指定目录</span><br><span class="line"> .pipe(notify({</span><br><span class="line"> message: 'Styles task complete'//提醒任务完成</span><br><span class="line"> }));</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">// js代码校验、合并和压缩 Scripts。 Scripts任务</span><br><span class="line">gulp.task('scripts', function () {</span><br><span class="line"> return gulp.src('javescript/*.js') //js代码校验</span><br><span class="line"> .pipe(jshint())</span><br><span class="line"> .pipe(jshint.reporter('default'))</span><br><span class="line"> .pipe(concat('all.js'))//js代码合并</span><br><span class="line"> .pipe(rename({</span><br><span class="line"> suffix: '.min'//给文件添加.min后缀</span><br><span class="line"> }))</span><br><span class="line"> .pipe(uglify())//压缩脚本文件</span><br><span class="line"> .pipe(gulp.dest('assets/js/'))//输出压缩文件到指定目录</span><br><span class="line"> .pipe(notify({</span><br><span class="line"> message: 'Scripts task complete'//提醒任务完成</span><br><span class="line"> }));</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">// 图片压缩。Images</span><br><span class="line">gulp.task('images', function () {</span><br><span class="line"> return gulp.src('assets/images/*')//检测图片路径</span><br><span class="line"> .pipe(cache(imagemin({</span><br><span class="line"> optimizationLevel: 3,</span><br><span class="line"> progressive: true,</span><br><span class="line"> interlaced: true</span><br><span class="line"> })))</span><br><span class="line"> .pipe(gulp.dest('assets/images'))</span><br><span class="line"> .pipe(notify({</span><br><span class="line"> message: 'Images task complete'</span><br><span class="line"> }));</span><br><span class="line">});</span><br><span class="line">// Default task</span><br><span class="line">gulp.task('default', function () {</span><br><span class="line"> gulp.start('styles', 'scripts', 'images');</span><br><span class="line">});</span><br><span class="line">// 事件监听。Watch</span><br><span class="line">gulp.task('watch', function () {</span><br><span class="line"> gulp.watch('stylesheets/*.scss', ['styles']);</span><br><span class="line"> gulp.watch('javascript/*.js', ['scripts']);</span><br><span class="line"> gulp.watch('assets/images/*', ['images']);</span><br><span class="line"> livereload.listen();</span><br><span class="line"> gulp.watch(['assets/*']).on('change', livereload.changed);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-jquery-搜索自动匹配关键字" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/09/24/jquery-搜索自动匹配关键字/">jquery 搜索自动匹配关键字</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/09/24/jquery-搜索自动匹配关键字/" class="article-date">
<time datetime="2015-09-24T06:23:07.000Z" itemprop="datePublished">2015-09-24</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>在项目中，可能会碰到搜索功能自动匹配关键字功能，开始也不会，后经过某位大神提供代码实现了搜索自动匹配功能；<br>实例使用的是模拟服务器发送json数据方式来实现功能；</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var json = [</span><br><span class="line"> {</span><br><span class="line"> "name": "搜索a",</span><br><span class="line"> "pinyin": "aaa"</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> "name": "搜索b",</span><br><span class="line"> "pinyin": "bcd"</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> "name": "数据",</span><br><span class="line"> "pinyin": "abc"</span><br><span class="line"> }</span><br><span class="line"> // 。。。。。。。。</span><br><span class="line">];</span><br></pre></td></tr></table></figure>
<h3 id="js代码："><a href="#js代码：" class="headerlink" title="js代码："></a>js代码：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">$('#input').on('keyup', function () {</span><br><span class="line"> var arr3=[];//匹配出来的所有对象</span><br><span class="line"> var search_str = $(this).val();</span><br><span class="line"> if(search_str !=""){ //判断当前搜索框非空</span><br><span class="line"> $(".search .s").css("display","block");//搜索框非空时，显示下拉搜索框</span><br><span class="line"> </span><br><span class="line"> var search_result = findInJsonPin(search_str, json);</span><br><span class="line"> var $show_area = $('#show-area');</span><br><span class="line"> $show_area.empty();</span><br><span class="line"> search_result.forEach(function (val) {</span><br><span class="line"> $show_area.append('<li>' + val + '</li>');//添加匹配出来的对象</span><br><span class="line"> arr3.push(val);//将所有匹配的对象存放到数组</span><br><span class="line"> });</span><br><span class="line"> //点击匹配的对象添加到输入框，并隐藏下拉搜索框</span><br><span class="line"> $("#show-area").on("click","li",function(){</span><br><span class="line"> $('#input').val(arr3[$(this).index()]);</span><br><span class="line"> $(".search .s").css("display","none");</span><br><span class="line"> });</span><br><span class="line"> }else{</span><br><span class="line"> $(".search .s").css("display","none");</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line">function findInJson(search_str, json) {</span><br><span class="line"> var result = [];</span><br><span class="line"> json.forEach(function (val) {</span><br><span class="line"> var regex = new RegExp(search_str, 'i');</span><br><span class="line"> if (regex.test(val.name)) {</span><br><span class="line"> result.push(val.name);</span><br><span class="line"> } else if (regex.test(val.pinyin)) {</span><br><span class="line"> result.push(val.pinyin);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> return result;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="html代码部分："><a href="#html代码部分：" class="headerlink" title="html代码部分："></a>html代码部分：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><input id="input" class="txt" type="text" ></span><br><span class="line"><ul class="s" id="show-area"></ul></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-jquery-ajax获取txt数据" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/09/23/jquery-ajax获取txt数据/">jquery ajax获取txt数据</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/09/23/jquery-ajax获取txt数据/" class="article-date">
<time datetime="2015-09-23T06:18:09.000Z" itemprop="datePublished">2015-09-23</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p><strong>JSON</strong>(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON存储了以“Key-Value”为结构的数据。有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现。<br>txt假设为服务器发送的数据，以json格式为例，如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> "one": "aaa",</span><br><span class="line"> "two": "bbb",</span><br><span class="line"> "three": "ccc"</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="1-ajax方法："><a href="#1-ajax方法：" class="headerlink" title="1.ajax方法："></a>1.ajax方法：</h3><p>js获取txt文本，转化成json数据，代码如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(document).ready(function(){</span><br><span class="line"> var ajax = $.ajax({</span><br><span class="line"> url:"txt.txt",</span><br><span class="line"> dataType: 'json',</span><br><span class="line"> success:function(data){</span><br><span class="line"> console.log(data);//打印数据</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h3 id="2-getJSON方法："><a href="#2-getJSON方法：" class="headerlink" title="2.getJSON方法："></a>2.getJSON方法：</h3><p>参数:</p>
<ul>
<li>url,[data],[callback]String,Map,FunctionV1.0</li>
<li>url:发送请求地址。</li>
<li>data:待发送 Key/value 参数。</li>
<li>callback:载入成功时回调函数。</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(document).ready(function(){</span><br><span class="line"> $.getJSON("txt.txt",function(data){</span><br><span class="line"> console.log(data);//打印数据</span><br><span class="line"> })</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-css3-鼠标滑过背景图片，图片围绕圆心旋转的效果" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/09/22/css3-鼠标滑过背景图片，图片围绕圆心旋转的效果/">css3 鼠标滑过背景图片，图片围绕圆心旋转的效果</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/09/22/css3-鼠标滑过背景图片，图片围绕圆心旋转的效果/" class="article-date">
<time datetime="2015-09-22T06:12:06.000Z" itemprop="datePublished">2015-09-22</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>鼠标滑过背景图片，图片围绕圆心旋转，鼠标移出图片就停止转动。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><style></span><br><span class="line">img{</span><br><span class="line"> transition:transform 0.8s;</span><br><span class="line"> -moz-transition: -moz-transform 0.8s; /* Firefox 4 */</span><br><span class="line"> -webkit-transition: -webkit-transform 0.8s; /* Safari and Chrome */</span><br><span class="line"> -o-transition: -o-transform 0.8s; /* Opera */</span><br><span class="line">}</span><br><span class="line">img:hover{</span><br><span class="line"> transform:rotate(180deg);</span><br><span class="line"> -ms-transform:rotate(180deg); /* IE 9 */</span><br><span class="line"> -moz-transform:rotate(180deg); /* Firefox */</span><br><span class="line"> -webkit-transform:rotate(180deg); /* Safari 和 Chrome */</span><br><span class="line"> -o-transform:rotate(180deg); /* Opera */</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-html行内元素-和-块状元素-总结" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/09/22/html行内元素-和-块状元素-总结/">html行内元素 和 块状元素 总结</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/09/22/html行内元素-和-块状元素-总结/" class="article-date">
<time datetime="2015-09-22T06:00:46.000Z" itemprop="datePublished">2015-09-22</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<h3 id="块级元素和内联元素的区别："><a href="#块级元素和内联元素的区别：" class="headerlink" title="块级元素和内联元素的区别："></a>块级元素和内联元素的区别：</h3><p><strong>块级：</strong>块级元素会独占一行，默认情况下宽度自动填满其父元素宽度；块级元素可以设置宽高；<br><strong>行内：</strong>行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而；行内元素不可以设置宽高</p>
<h3 id="块状元素"><a href="#块状元素" class="headerlink" title="块状元素"></a>块状元素</h3><ul>
<li><p>address 地址</p>
</li>
<li><p>blockquote 块引用</p>
</li>
<li><p>center 举中对齐块</p>
</li>
<li><p>dir 目录列表</p>
</li>
<li><p>div 常用块级容易，也是CSS layout的主要标签</p>
</li>
<li><p>dl 定义列表</p>
</li>
<li><p>fieldset form控制组</p>
</li>
<li><p>form 交互表单h1 标题</p>
</li>
<li><p>h2 副标题</p>
</li>
<li><p>h3 3级标题</p>
</li>
<li><p>h4 4级标题</p>
</li>
<li><p>h5 5级标题</p>
</li>
<li><p>h6 6级标题</p>
</li>
<li><p>hr 水平分隔线</p>
</li>
<li><p>isindex input prompt</p>
</li>
<li><p>menu 菜单列表</p>
</li>
<li><p>noframes frames可选内容，（对于不支持frame的浏览器显示此区块内容</p>
</li>
<li><p>noscript 可选脚本内容（对于不支持script的浏览器显示此内容）</p>
</li>
<li><p>ol 有序表单</p>
</li>
<li><p>p 段落</p>
</li>
<li><p>pre 格式化文本</p>
</li>
<li><p>table 表格</p>
</li>
<li><p>ul 无序列表</p>
</li>
</ul>
<h3 id="内联元素"><a href="#内联元素" class="headerlink" title="内联元素"></a>内联元素</h3><ul>
<li>a 锚点</li>
<li>abbr - 缩写</li>
<li>acronym - 首字</li>
<li>b - 粗体(不推荐)</li>
<li>bdo - bidi override</li>
<li>big - 大字体</li>
<li>br - 换行</li>
<li>cite - 引用</li>
<li>code - 计算机代码(在引用源码的时候需要)</li>
<li>dfn - 定义字段</li>
<li>em - 强调</li>
<li>font - 字体设定(不推荐)</li>
<li>i - 斜体</li>
<li>img - 图片</li>
<li>input - 输入框</li>
<li>kbd - 定义键盘文本</li>
<li>label - 表格标签</li>
<li>q - 短引用</li>
<li>s - 中划线(不推荐)</li>
<li>samp - 定义范例计算机代码</li>
<li>select - 项目选择</li>
<li>small - 小字体文本</li>
<li>strike - 中划线</li>
<li>strong - 粗体强调</li>
<li>sub - 下标</li>
<li>sup - 上标</li>
<li>tt - 电传文本</li>
<li>u - 下划线</li>
<li>var - 定义变量</li>
</ul>
</div>
</div>
</article>
<article id="post-font-awesome图标字体库和CSS框架的使用" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/09/10/font-awesome图标字体库和CSS框架的使用/">font-awesome图标字体库和CSS框架的使用</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/09/10/font-awesome图标字体库和CSS框架的使用/" class="article-date">
<time datetime="2015-09-10T05:40:09.000Z" itemprop="datePublished">2015-09-10</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<p>Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和编辑器图标等等。Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。</p>
<p>参考网站：<a href="http://fontawesome.dashgame.com/" title="fontawesome图标字体库" target="_blank" rel="external">fontawesome</a></p>
<ul>
<li><p>下载最新 Font Awesome 插件；</p>
</li>
<li><p>把css和fonts文件夹引入到项目中；</p>
</li>
<li><p>在页面上调用css样式，使用方法，例如：</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><i class="fa fa-camera-retro"></i></span><br></pre></td></tr></table></figure>
</div>
</div>
</article>
<article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2015/01/01/hello-world/">第一篇文章</a>
</h1>
</header>
<div class="article-meta">
<a href="/2015/01/01/hello-world/" class="article-date">
<time datetime="2014-12-31T16:00:00.000Z" itemprop="datePublished">2015-01-01</time>
</a>
</div>
<div class="article-inner">
<div class="article-entry" itemprop="articleBody">
<!-- Table of Contents -->
<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>.</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><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></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><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></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><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></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><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
</div>
</div>
</article>
</section>
</div>
</div>
</div>
</body>
</html>