forked from daili-11/daili-11.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1871 lines (991 loc) · 505 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
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html class="theme-next muse use-motion">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />
<meta name="keywords" content="Hexo, NexT" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1" />
<meta name="description">
<meta property="og:type" content="website">
<meta property="og:title" content="Yes I can">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Yes I can">
<meta property="og:description">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Yes I can">
<meta name="twitter:description">
<script type="text/javascript" id="hexo.configuration">
var NexT = window.NexT || {};
var CONFIG = {
scheme: 'Muse',
sidebar: {"position":"left","display":"post"},
fancybox: true,
motion: true,
duoshuo: {
userId: 0,
author: 'Author'
}
};
</script>
<link rel="canonical" href="http://yoursite.com/"/>
<title> Yes I can </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="">
<div class="container one-collumn sidebar-position-left
page-home
">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-meta custom-logo">
<div class="site-meta-headline">
<a>
<img class="custom-logo-image" src="img/img1.jpg"
alt="Yes I can"/>
</a>
</div>
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Yes I can</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle"></p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
Home
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
Archives
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
Tags
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/08/26/xo/" itemprop="url">
Untitled
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2016-08-26T21:25:47+08:00" content="2016-08-26">
2016-08-26
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="hexo的简单使用"><a href="#hexo的简单使用" class="headerlink" title="hexo的简单使用"></a>hexo的简单使用</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><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><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br></pre></td><td class="code"><pre><span class="line">我只会简单的使用，毕竟英语不好也是个大问题，所以不要嫌弃它哦！</span><br><span class="line"></span><br><span class="line">搭建Hexo</span><br><span class="line"></span><br><span class="line">首先就是搭建Hexo</span><br><span class="line"></span><br><span class="line">由于网上教程很多所以我就不讲啦，直接给个链接就OK啦</span><br><span class="line"></span><br><span class="line">www.jianshu.com/p/06c0fb6f8b4d</span><br><span class="line"></span><br><span class="line">搭建完成以后，就是开始编写啦，编写也有一些工具，这里我用的是MacDown，就是下面那个</span><br><span class="line"></span><br><span class="line">MacDown logo</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"></span><br><span class="line">(3个-)</span><br><span class="line">title: 你的文章题目</span><br><span class="line">(3个-)</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">(3个#) 你的目录1</span><br><span class="line">内容1</span><br><span class="line"></span><br><span class="line">(3个#) 你的目录2</span><br><span class="line">内容2</span><br><span class="line"></span><br><span class="line">(3个#) 你的目录3</span><br><span class="line">内容3</span><br><span class="line"></span><br><span class="line">你的目录1</span><br><span class="line">内容1</span><br><span class="line"></span><br><span class="line">你的目录2</span><br><span class="line">内容2</span><br><span class="line"></span><br><span class="line">你的目录3</span><br><span class="line">内容3</span><br><span class="line"></span><br><span class="line">需要注意的是 (3个#) 和 你的目录1 中间要空格，否则页面输出</span><br><span class="line">(3个#)你的目录1</span><br><span class="line"></span><br><span class="line">注：title是标题，(3个#) 是二级标题，(4个#) 三级标题 </span><br><span class="line"></span><br><span class="line">(1个*)相当于强调(注：多少*开头就多少*结尾)，效果如下</span><br><span class="line"></span><br><span class="line">(1个*)我是谁(1个*)</span><br><span class="line">我是谁</span><br><span class="line"></span><br><span class="line">(2个*)我是谁(2个*)</span><br><span class="line">我是谁</span><br><span class="line"></span><br><span class="line">(3个*)我是谁(3个*)</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"></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"><http://www.jianshu.com/p/06c0fb6f8b4d></span><br><span class="line"></span><br><span class="line">代码框</span><br><span class="line"></span><br><span class="line">（3个`）+html</span><br><span class="line"><html></span><br><span class="line"> <head></head></span><br><span class="line"> <body></body></span><br><span class="line"></html></span><br><span class="line">（3个`）+</span><br><span class="line">输出</span><br><span class="line"></span><br><span class="line"><html></span><br><span class="line"> <head></head></span><br><span class="line"> <body></body></span><br><span class="line"></html></span><br><span class="line">（3个`）+css</span><br><span class="line">.a{</span><br><span class="line"> width:100px;</span><br><span class="line">}</span><br><span class="line">（3个`）</span><br><span class="line">输出</span><br><span class="line"></span><br><span class="line">.a{</span><br><span class="line"> width:100px;</span><br><span class="line">}</span><br><span class="line">（3个`）+js</span><br><span class="line">window.onload = function(){</span><br><span class="line">}</span><br><span class="line">（3个`）</span><br><span class="line">输出</span><br><span class="line"></span><br><span class="line">window.onload = function (){ </span><br><span class="line">}</span><br><span class="line">文本框</span><br><span class="line">（3个`）</span><br><span class="line">文本框</span><br><span class="line">（3个`）</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">页面风格的改变</span><br><span class="line"></span><br><span class="line">首先先找到一个你喜欢的样式风格</span><br><span class="line"></span><br><span class="line">推荐看这个：https://www.zhihu.com/question/24422335</span><br><span class="line"></span><br><span class="line">找到喜欢的样式风格，先要克隆到你的目录中，样式的存放一般在你的hexo文件夹里的themes，所以我们只需找你的hexo文件夹就可以克隆进去</span><br><span class="line"></span><br><span class="line">打开终端，进入你的hexo文件夹</span><br><span class="line"></span><br><span class="line">终端输入 cd 你的hexo文件夹存放目录 ,然后回车(Enter)</span><br><span class="line"></span><br><span class="line">例（我的hexo文件夹命名为hexo，放在桌面）</span><br><span class="line"></span><br><span class="line">$ cd desktop/hexo</span><br><span class="line"></span><br><span class="line">进入目录以后就克隆</span><br><span class="line"></span><br><span class="line">终端输入 git clone <你的库> themes/<样式名> ,然后回车(Enter)</span><br><span class="line"></span><br><span class="line">如下（这里我使用的是网上别人的库，你也可以参考使用）</span><br><span class="line"></span><br><span class="line">$ git clone https://github.com/iissnan/hexo-theme-next themes/next</span><br><span class="line"></span><br><span class="line">$ cd themes/next</span><br><span class="line"></span><br><span class="line">$ git pull</span><br><span class="line"></span><br><span class="line">注：</span><br><span class="line">https://github.com/iissnan/hexo-theme-next--next的库</span><br><span class="line">next–样式名</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">编译还是在终端，还是在你的hexo文件夹目录下编译</span><br><span class="line"></span><br><span class="line">$ hexo g</span><br><span class="line"></span><br><span class="line">编译完成</span><br><span class="line"></span><br><span class="line">如果想要根据IP打开页面，则需要打开服务器，hexo自带有在终端输入</span><br><span class="line"></span><br><span class="line">$hexo s</span><br><span class="line"></span><br><span class="line">即可</span><br><span class="line"></span><br><span class="line">还有一种就是上传到github（github是什么就自己扒，我就不讲了）</span><br><span class="line">上传到github只需上传你的hexo文件夹里的public文件夹下所有的文件就可以了，每一次更新就上传替换一次，这样简单的个人博客就完成啦！</span><br><span class="line">鼓掌！！！！</span><br></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/08/26/fun/" itemprop="url">
Untitled
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2016-08-26T20:43:06+08:00" content="2016-08-26">
2016-08-26
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="封装好的一些有用函数"><a href="#封装好的一些有用函数" class="headerlink" title="封装好的一些有用函数"></a>封装好的一些有用函数</h2><h3 id="四则运算的函数"><a href="#四则运算的函数" class="headerlink" title="四则运算的函数"></a>四则运算的函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">_equals</span>(<span class="params">per_number , next_number, operation</span>)</span>{</span><br><span class="line"> <span class="keyword">switch</span> (operation){</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'+'</span>:</span><br><span class="line"> per_number += next_number;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'-'</span>:</span><br><span class="line"> per_number -= next_number;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'*'</span>:</span><br><span class="line"> per_number *= next_number;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'/'</span>:</span><br><span class="line"> <span class="keyword">if</span>(next_number ==<span class="number">0</span> ){</span><br><span class="line"> per_number = <span class="literal">null</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> per_number /= next_number;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(per_number == <span class="literal">null</span>){</span><br><span class="line"> <span class="keyword">return</span> <span class="literal">NaN</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">return</span> per_number;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="查找字符的个数"><a href="#查找字符的个数" class="headerlink" title="查找字符的个数"></a>查找字符的个数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">indexofFn</span>(<span class="params">str,font</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> i = <span class="number">0</span> ;</span><br><span class="line"> <span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">while</span> (str.indexOf(font,i) > <span class="number">-1</span>) {</span><br><span class="line"> <span class="comment">//在找到的时候循环</span></span><br><span class="line"> sum ++;<span class="comment">//找到后+1</span></span><br><span class="line"> i=str.indexOf(font,i) + <span class="number">1</span>;</span><br><span class="line"> <span class="comment">//在位置之后再开始查找</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> sum;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="最大值-arguments"><a href="#最大值-arguments" class="headerlink" title="最大值(arguments)"></a>最大值(arguments)</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//方法1</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">max</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> max = <span class="built_in">arguments</span>[<span class="number">0</span>];<span class="comment">//记录第一个值，假装它是最大的</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">1</span>; i<<span class="built_in">arguments</span>.length;i++) {</span><br><span class="line"> <span class="comment">//记录了第一个，就从第二个开始比较</span></span><br><span class="line"> <span class="keyword">if</span>(max<<span class="built_in">arguments</span>[i]){</span><br><span class="line"> <span class="comment">//判断它是否真的最大，一个一个去比较</span></span><br><span class="line"> max = <span class="built_in">arguments</span>[i];<span class="comment">//比它大就替换</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> max;<span class="comment">//比较结束后返回最大值</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//方法2</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">max</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<<span class="built_in">arguments</span>.length;i++) {</span><br><span class="line"> <span class="comment">//从第一个开始</span></span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">arguments</span>[i]><span class="built_in">arguments</span>[i+<span class="number">1</span>]){</span><br><span class="line"> <span class="comment">//第一个和第二个比较</span></span><br><span class="line"> <span class="built_in">arguments</span>[i+<span class="number">1</span>] = <span class="built_in">arguments</span>[i];</span><br><span class="line"> <span class="comment">//第二个小于第一个，替换第二个，再与第三个比较</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">arguments</span>[i<span class="number">-1</span>];<span class="comment">//比较结束后返回最大值</span></span><br><span class="line">}</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">alert(max(<span class="number">5</span>,<span class="number">8</span>,<span class="number">6</span>,<span class="number">9</span>,<span class="number">1</span>,<span class="number">3</span>,<span class="number">7</span>,<span class="number">2</span>,<span class="number">4</span>));</span><br></pre></td></tr></table></figure>
<h3 id="随机数"><a href="#随机数" class="headerlink" title="随机数"></a>随机数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*myrandom(min,max) min到max范围的随机数*/</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myrandom</span>(<span class="params">min,max</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> rnd = <span class="built_in">Math</span>.round(<span class="built_in">Math</span>.random()*(max-min)+min);</span><br><span class="line"> <span class="keyword">return</span> rnd;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">alert(myrandom(<span class="number">1</span>,<span class="number">2</span>));</span><br></pre></td></tr></table></figure>
<h3 id="倒计时"><a href="#倒计时" class="headerlink" title="倒计时"></a>倒计时</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getTimeFn</span>(<span class="params">year,month,day</span>)</span>{</span><br><span class="line"> setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> oDate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"> <span class="comment">//默认当前时间</span></span><br><span class="line"> <span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>(year+<span class="string">"/"</span>+month+<span class="string">"/"</span>+day);</span><br><span class="line"> <span class="keyword">var</span> time = <span class="built_in">parseInt</span>((d-oDate)/<span class="number">1000</span>);</span><br><span class="line"> <span class="keyword">var</span> day = <span class="built_in">parseInt</span>(time/<span class="number">86400</span>);</span><br><span class="line"> <span class="keyword">var</span> h = <span class="built_in">parseInt</span>(time%<span class="number">86400</span>/<span class="number">3600</span>);</span><br><span class="line"> <span class="keyword">var</span> m = <span class="built_in">parseInt</span>(time%<span class="number">3600</span>/<span class="number">60</span>);</span><br><span class="line"> <span class="keyword">var</span> s = <span class="built_in">parseInt</span>(time%<span class="number">60</span>);</span><br><span class="line"> <span class="keyword">return</span> [day,h,m,s];</span><br><span class="line"> },<span class="number">1000</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="数组排序"><a href="#数组排序" class="headerlink" title="数组排序"></a>数组排序</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sort</span>(<span class="params">arr</span>)</span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<arr.length;i++) {</span><br><span class="line"> <span class="comment">//遍历每一个</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j=i+<span class="number">1</span>; j<arr.length;j++) {</span><br><span class="line"> <span class="comment">//比较每一个</span></span><br><span class="line"> <span class="keyword">if</span>(arr[i]-arr[j]><span class="number">0</span>){</span><br><span class="line"> <span class="comment">//判断大小</span></span><br><span class="line"> <span class="comment">//调转位置</span></span><br><span class="line"> <span class="keyword">var</span> a = arr[i];</span><br><span class="line"> arr[i] = arr[j];</span><br><span class="line"> arr[j] = a;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> arr;<span class="comment">//结束返回数组</span></span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">18</span>,<span class="number">5</span>,<span class="number">9</span>,<span class="number">6</span>,<span class="number">4</span>,<span class="number">19</span>,<span class="number">3</span>,<span class="number">2</span>,<span class="number">7</span>,<span class="number">1</span>,<span class="number">8</span>,<span class="number">0</span>];</span><br><span class="line"><span class="built_in">document</span>.write(sort(arr));</span><br></pre></td></tr></table></figure>
<h3 id="清除数组中的重复字符"><a href="#清除数组中的重复字符" class="headerlink" title="清除数组中的重复字符"></a>清除数组中的重复字符</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr=[<span class="number">5</span>,<span class="number">2</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">2</span>,<span class="number">8</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>];</span><br><span class="line"> <span class="comment">// 0 arr[0]==arr[5] 如果是重复 删掉arr[5]</span></span><br><span class="line"> <span class="comment">//splice(5,1)</span></span><br><span class="line"> </span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">noRepeat</span>(<span class="params">arr1</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < arr1.length; i++) {</span><br><span class="line"> <span class="comment">//每个遍历一次</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = i+<span class="number">1</span>; j < arr1.length; j++) {</span><br><span class="line"> <span class="comment">//与后面每个比较</span></span><br><span class="line"> <span class="keyword">if</span> (arr1[i]==arr1[j]) {</span><br><span class="line"> arr1.splice(j,<span class="number">1</span>);</span><br><span class="line"> <span class="comment">//相同清除</span></span><br><span class="line"> j--;</span><br><span class="line"> <span class="comment">//清除后，位置变化，j就要返回上一个</span></span><br><span class="line"> }</span><br><span class="line"> } </span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> arr1;<span class="comment">//结束返回数组</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> arr1 = noRepeat(arr);</span><br><span class="line"> alert(arr1);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr=[<span class="number">5</span>,<span class="number">2</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">2</span>,<span class="number">8</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>];</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">noRepeat</span>(<span class="params">arr1</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> newArr = [];<span class="comment">//定义存放数组中不相同的值</span></span><br><span class="line"> newArr.push(arr1[<span class="number">0</span>])<span class="comment">//初始化</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < arr1.length; i++) {</span><br><span class="line"> <span class="comment">//每个遍历一次</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j < newArr.length; j++) {</span><br><span class="line"> <span class="comment">//与后面每个比较</span></span><br><span class="line"> <span class="keyword">if</span> (newArr[j]==arr1[i]) {</span><br><span class="line"> <span class="comment">/*判断新数组的值是否与数组当前值相等，是就退出当前循环*/</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line"> } </span><br><span class="line"> <span class="comment">/*判断新数组是否完全遍历，如果不是说明新数组的值与数组当前值相等，则不添加入新数组，否则反之*/</span></span><br><span class="line"> <span class="keyword">if</span> (j==newArr.length) {</span><br><span class="line"> newArr.push(arr1[i]);</span><br><span class="line"> <span class="comment">// newArr[newArr.length] = arr[i]</span></span><br><span class="line"> } </span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> newArr;<span class="comment">//结束返回数组</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> arr1 = noRepeat(arr);</span><br><span class="line"> alert(arr1);</span><br></pre></td></tr></table></figure>
<h3 id="倒数计时器"><a href="#倒数计时器" class="headerlink" title="倒数计时器"></a>倒数计时器</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">timerFn</span>(<span class="params">n</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> n-=<span class="number">0.02</span>;<span class="comment">//每20毫秒-0.02</span></span><br><span class="line"> <span class="keyword">if</span>(n <= <span class="number">0</span>){</span><br><span class="line"> clearInterval(timer);</span><br><span class="line"> n=<span class="number">0</span>;<span class="comment">//有偏差，强制为0</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> n.toFixed(<span class="number">2</span>);<span class="comment">//取小数点后两位</span></span><br><span class="line"> },<span class="number">20</span>)<span class="comment">//20毫秒每次，五次就获得一秒，减少偏差</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="随机打乱数组内容"><a href="#随机打乱数组内容" class="headerlink" title="随机打乱数组内容"></a>随机打乱数组内容</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sortFn</span>(<span class="params">arr</span>)</span>{</span><br><span class="line"> arr.sort(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">return</span> <span class="built_in">Math</span>.random()<span class="number">-0.5</span>});</span><br><span class="line"> <span class="keyword">return</span> arr;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="图片移动切换动画函数"><a href="#图片移动切换动画函数" class="headerlink" title="图片移动切换动画函数"></a>图片移动切换动画函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">moveFn</span>(<span class="params"></span>)</span>{</span><br><span class="line"> move_bol = <span class="literal">true</span>;</span><br><span class="line"> <span class="comment">//记录动画开始</span></span><br><span class="line"> <span class="keyword">var</span> start = <span class="built_in">parseInt</span>(inner.style.left) || <span class="number">0</span>;</span><br><span class="line"> <span class="comment">//初始位置</span></span><br><span class="line"> <span class="keyword">var</span> change = -(inner.children[<span class="number">0</span>].offsetWidth)*index-start;</span><br><span class="line"> <span class="comment">//移动的距离</span></span><br><span class="line"> <span class="keyword">var</span> t = <span class="number">0</span>;<span class="comment">//第几步开始</span></span><br><span class="line"> <span class="keyword">var</span> endT = <span class="number">30</span>;<span class="comment">//执行步数</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> t++;<span class="comment">//每30毫秒加一步</span></span><br><span class="line"> <span class="keyword">if</span>(t >= endT){</span><br><span class="line"> clearInterval(timer);<span class="comment">//endT步后清除计时器</span></span><br><span class="line"> move_bol = <span class="literal">false</span>;<span class="comment">//记录动画结束</span></span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//调用了贝塞尔曲线，详情请看图片切换案例</span></span><br><span class="line"> <span class="keyword">var</span> l = Tween.Bounce.easeOut(t, start, change, endT);<span class="comment">//计算每30毫秒移动的距离</span></span><br><span class="line"> inner.style.left = l+<span class="string">'px'</span>;<span class="comment">//移动</span></span><br><span class="line"> },<span class="number">30</span>)</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 class="function"><span class="keyword">function</span> <span class="title">moveFn</span>(<span class="params"></span>)</span>{</span><br><span class="line"> move_bol = <span class="literal">true</span>;<span class="comment">//记录动画开始</span></span><br><span class="line"> <span class="keyword">var</span> start = <span class="built_in">parseInt</span>(inner.style.left) || <span class="number">0</span>;<span class="comment">//初始位置</span></span><br><span class="line"> <span class="keyword">var</span> change = -(inner.children[<span class="number">0</span>].offsetWidth)*index - start;<span class="comment">//移动的距离</span></span><br><span class="line"> <span class="keyword">var</span> t = <span class="number">0</span>;<span class="comment">//第几步开始</span></span><br><span class="line"> <span class="keyword">var</span> endT = <span class="number">30</span>;<span class="comment">//执行步数</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> t+=<span class="number">1</span>;</span><br><span class="line"> <span class="comment">//每30毫秒加一步</span></span><br><span class="line"> <span class="keyword">if</span>(t>=endT){</span><br><span class="line"> clearInterval(timer);<span class="comment">//endT步后清除计时器</span></span><br><span class="line"> move_bol = <span class="literal">false</span>;<span class="comment">//记录动画结束</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> l = start + (change*t/endT);</span><br><span class="line"> inner.style.left = l+<span class="string">'px'</span>;<span class="comment">//移动</span></span><br><span class="line"> },<span class="number">30</span>)</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<h3 id="图片淡入切换动画函数"><a href="#图片淡入切换动画函数" class="headerlink" title="图片淡入切换动画函数"></a>图片淡入切换动画函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showFn</span>(<span class="params">before</span>)</span>{</span><br><span class="line"> move_bol = <span class="literal">true</span>;<span class="comment">//记录动画开始</span></span><br><span class="line"> <span class="keyword">var</span> t = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i< img.length; i++){</span><br><span class="line"> img[i].style.zIndex = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span>(before!=i){</span><br><span class="line"> img[i].style.opacity = <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> img[index].style.zIndex = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">var</span> timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> t++;</span><br><span class="line"> <span class="keyword">if</span>(t >= <span class="number">50</span>){</span><br><span class="line"> clearInterval(timer);</span><br><span class="line"> move_bol = <span class="literal">false</span>;<span class="comment">//记录动画结束</span></span><br><span class="line"> }</span><br><span class="line"> img[index].style.opacity = t/<span class="number">50</span> ;</span><br><span class="line"> },<span class="number">30</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="获取标签最终top和left以及获取标签计算后的样式"><a href="#获取标签最终top和left以及获取标签计算后的样式" class="headerlink" title="获取标签最终top和left以及获取标签计算后的样式"></a>获取标签最终top和left以及获取标签计算后的样式</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/*获取标签最终top和left obj 需要获取的标签对象 返回json{top:xxx,left:xxxxx}*/</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">offsetFn</span>(<span class="params">obj</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> t = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">var</span> l = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">while</span>(obj){</span><br><span class="line"> <span class="comment">/*询问对象是否存在，存在才执行代码块 边框默认不添加进去，需要自己遍历添加*/</span></span><br><span class="line"> <span class="keyword">var</span> bT = <span class="built_in">parseInt</span>(getStyle(obj,<span class="string">"borderTopWidth"</span>));</span><br><span class="line"> <span class="comment">//borderTop的宽度</span></span><br><span class="line"> <span class="keyword">var</span> bL = <span class="built_in">parseInt</span>(getStyle(obj,<span class="string">"borderLeftWidth"</span>));</span><br><span class="line"> <span class="comment">//borderLeft的宽度</span></span><br><span class="line"></span><br><span class="line"> t += obj.offsetTop + bT ;</span><br><span class="line"> l += obj.offsetLeft + bL;</span><br><span class="line"> obj = obj.offsetParent;<span class="comment">//父级替换子级</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> {<span class="string">"top"</span>:t,<span class="string">"left"</span>:l};<span class="comment">//返回json</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/*获取标签计算后的样式 参数obj：标签元素 attr：样式属性currentStyle：IE可标识,非IE不可标识 getComputedStyle：IE不可标识,非IE可标识*/</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">obj,attr</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,<span class="literal">null</span>)[attr];</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="隐藏当前除子级以外所有的孙子及以下元素（递归的使用）"><a href="#隐藏当前除子级以外所有的孙子及以下元素（递归的使用）" class="headerlink" title="隐藏当前除子级以外所有的孙子及以下元素（递归的使用）"></a>隐藏当前除子级以外所有的孙子及以下元素（递归的使用）</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*findUl 找到孙子并隐藏孙子及孙子下所有的子级 obj 孙子的爷爷利用递归 逐级找到孙子以及孙子下所有的子级，并隐藏所有找到的子级*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findUl</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> lis = obj.children;<span class="comment">//获取元素儿子</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i < lis.length; i ++) {</span><br><span class="line"> <span class="keyword">if</span>(lis[i].children[<span class="number">0</span>]){</span><br><span class="line"> findUl(lis[i].children[<span class="number">0</span>]);<span class="comment">//递归</span></span><br><span class="line"> lis[i].children[<span class="number">0</span>].style.display = <span class="string">'none'</span>;<span class="comment">//找完后，隐藏元素儿子</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="节点的查找"><a href="#节点的查找" class="headerlink" title="节点的查找"></a>节点的查找</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//查找下一个节点函数 obj参数为当前标签元素</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">nextFn</span> (<span class="params">obj</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> obj.nextElementSibling?obj.nextElementSibling:obj.nextSibling;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">nextFn(li[<span class="number">1</span>]).style.background = <span class="string">'burlywood'</span>;</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="comment">//查找上一个节点函数 obj参数为当前标签元素</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">previousFn</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> obj.previousElementSibling?obj.previousElementSibling:obj.previousSibling;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">previousFn(li[<span class="number">4</span>]).style.background = <span class="string">'skyblue'</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">//查找第一个子节点函数 obj参数为第一个子节点的父级标签元素</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">firstFn</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> obj.firstElementChild?obj.firstElementChild:obj.firstChild;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">firstFn(ul).style.background = <span class="string">'palegreen'</span>;</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="comment">//查找最后一个子节点函数 obj参数为最后一个子节点的父级标签元素</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">lastFn</span>(<span class="params">obj</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> obj.lastElementChild?obj.lastElementChild:obj.lastChild;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">lastFn(ul).style.background = <span class="string">'coral'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//自定义封装一个通过标签名的函数 tag参数为大写标签名 范围是全文的标签 返回一个数组</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">TagName</span> (<span class="params">tag</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> childs = wrap.childNodes;</span><br><span class="line"> <span class="keyword">var</span> arr = [];</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i<childs.length;i++) {</span><br><span class="line"> <span class="comment">//nodeType：节点类型 nodeName：节点名</span></span><br><span class="line"> <span class="keyword">if</span> (childs[i].nodeType == <span class="number">1</span> && childs[i].nodeName == tag) {</span><br><span class="line"> arr.push(childs[i]);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> arr;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="改变元素滚动条高度"><a href="#改变元素滚动条高度" class="headerlink" title="改变元素滚动条高度"></a>改变元素滚动条高度</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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"><span class="comment">// 函数注释 改变元素滚动条高度动画函数 end参数是最终高度，不可为空 fn参数是计时器结束后执行的回调函数，可为空</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFn</span>(<span class="params">end,fn</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> start = <span class="built_in">document</span>.body.scrollTop || <span class="built_in">document</span>.documentElement.scrollTop ;<span class="comment">//初始高度</span></span><br><span class="line"> <span class="keyword">var</span> change = end - start;<span class="comment">//改变的高度值</span></span><br><span class="line"> <span class="keyword">var</span> t = <span class="number">0</span>;<span class="comment">//第几步开始</span></span><br><span class="line"> <span class="keyword">var</span> endT = <span class="number">30</span>;<span class="comment">//执行步数</span></span><br><span class="line"> <span class="keyword">var</span> timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//设置计时器</span></span><br><span class="line"> t++;<span class="comment">//每30毫秒加一步</span></span><br><span class="line"> <span class="keyword">if</span>(t >= endT){</span><br><span class="line"> <span class="comment">//当到达第30步时执行if里的代码块</span></span><br><span class="line"> clearInterval(timer);<span class="comment">//endT步后清除计时器</span></span><br><span class="line"> <span class="comment">//如果fn是一个函数则执行fn()，否则不执行</span></span><br><span class="line"> fn && fn();</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> sTop = Tween.Bounce.easeOut(t, start, change, endT);<span class="comment">//计算每30毫秒移动的距离</span></span><br><span class="line"> <span class="built_in">document</span>.body.scrollTop = sTop;</span><br><span class="line"> <span class="built_in">document</span>.documentElement.scrollTop = sTop;</span><br><span class="line"> },<span class="number">30</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="预加载图片"><a href="#预加载图片" class="headerlink" title="预加载图片"></a>预加载图片</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">/* loadImageFn 预加载图片函数 arr参数是图片数组 fn是过程回调函数 over是结束回调函数 IE6判断不了 */</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">loadImageFn</span> (<span class="params">arr,fn,over</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> index = <span class="number">0</span>;<span class="comment">//加载第几张</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i < arr.length; i++) {</span><br><span class="line"> <span class="keyword">var</span> img = <span class="keyword">new</span> Image();<span class="comment">//定义一个图片的对象</span></span><br><span class="line"> img.src = <span class="string">'img/'</span>+ arr[i];<span class="comment">//设置路径</span></span><br><span class="line"> img.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> index ++; <span class="comment">//加载</span></span><br><span class="line"> <span class="keyword">if</span> (index == arr.length) {</span><br><span class="line"> <span class="comment">//图片加载完成后</span></span><br><span class="line"> alert(<span class="string">'加载完成!'</span>)</span><br><span class="line"> over && over();<span class="comment">//结束回调函数</span></span><br><span class="line"> }</span><br><span class="line"> fn && fn(index);<span class="comment">//过程回调函数</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="函数-amp-变量的作用域-amp-eval"><a href="#函数-amp-变量的作用域-amp-eval" class="headerlink" title="函数 & 变量的作用域 & eval"></a>函数 & 变量的作用域 & eval</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></pre></td><td class="code"><pre><span class="line">函数</span><br><span class="line"></span><br><span class="line">函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><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></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// function show() {</span></span><br><span class="line"><span class="comment">// alert("函数");</span></span><br><span class="line"><span class="comment">// }</span></span><br><span class="line"><span class="comment">// show() 只有函数被调用，才会被之执行</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> show = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="string">"函数"</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="number">1</span>;<span class="comment">//函数结束后的返回值，如果没有就是undefined</span></span><br><span class="line"> alert(<span class="string">"内容"</span>);<span class="comment">//return 后面的内容不会再执行</span></span><br><span class="line">}</span><br><span class="line">alert(show())</span><br><span class="line"><span class="comment">//return 语句还有一个功能就是退出当前函数，注意和break 的区别。PS：break 用在循环和switch 分支语句里。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//传参</span></span><br><span class="line"><span class="keyword">var</span> show = <span class="function"><span class="keyword">function</span> (<span class="params">a,b</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">7</span>;<span class="comment">//模拟</span></span><br><span class="line"> <span class="keyword">var</span> b = <span class="number">9</span>;<span class="comment">//模拟</span></span><br><span class="line"> <span class="keyword">var</span> sum = a + b;</span><br><span class="line"> <span class="keyword">return</span> sum;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">// alert(show(7,9))</span></span><br><span class="line">alert(show(<span class="number">15</span>,<span class="number">38</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">//利用arguments写一个找最大值的变量</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">max</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> max = <span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line"> <span class="comment">// alert(arguments.length);</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < <span class="built_in">arguments</span>.length; i++) {</span><br><span class="line"> <span class="keyword">if</span> (max<<span class="built_in">arguments</span>[i]) {</span><br><span class="line"> max = <span class="built_in">arguments</span>[i];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> max; </span><br><span class="line">} </span><br><span class="line">alert(max(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">35</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">//匿名函数</span></span><br><span class="line"><span class="keyword">var</span> num = (</span><br><span class="line"> <span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>{</span><br><span class="line"> <span class="comment">//alert(a+b);</span></span><br><span class="line"> <span class="keyword">return</span> a+b;</span><br><span class="line"> }</span><br><span class="line">)(<span class="number">3</span>,<span class="number">4</span>);</span><br><span class="line">alert(num);</span><br></pre></td></tr></table></figure>
<h3 id="变量的作用域"><a href="#变量的作用域" class="headerlink" title="变量的作用域"></a>变量的作用域</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></pre></td><td class="code"><pre><span class="line">变量的作用域无非就是两种：全局变量和局部变量。</span><br><span class="line"></span><br><span class="line">Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="number">5</span>;<span class="comment">//全局变量</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*函数里面的变量定义了就是局部变量，只能在当前函数里面使用*/</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">show</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line"> alert(a);</span><br><span class="line">}</span><br><span class="line">show();<span class="comment">//弹10</span></span><br><span class="line">alert(a);<span class="comment">//弹5</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">15</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">show1</span>(<span class="params"></span>) </span>{</span><br><span class="line"> a = <span class="number">10</span>;</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">show2</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(a)<span class="comment">//第一次弹undefined</span></span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">5</span>;</span><br><span class="line"> alert(a);<span class="comment">//第二次弹5</span></span><br><span class="line"> }</span><br><span class="line"> show2();</span><br><span class="line"> alert(a);<span class="comment">//第三次弹10</span></span><br><span class="line">}</span><br><span class="line">show1()</span><br><span class="line">alert(a)<span class="comment">//第四次弹15</span></span><br></pre></td></tr></table></figure>
<h3 id="作用域练习"><a href="#作用域练习" class="headerlink" title="作用域练习"></a>作用域练习</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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"><span class="keyword">var</span> a = <span class="number">6</span>;</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> alert(a);<span class="comment">//66</span></span><br><span class="line"> a = <span class="number">666</span>;</span><br><span class="line"> }, <span class="number">1000</span>);</span><br><span class="line"></span><br><span class="line"> a = <span class="number">66</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">6</span>; <span class="comment">//a=6</span></span><br><span class="line"> (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> alert(a);</span><br><span class="line"> a = <span class="number">666</span>;<span class="comment">//a = 666</span></span><br><span class="line"> })();</span><br><span class="line"> })();</span><br><span class="line"> a = <span class="number">66</span>; </span><br><span class="line"> alert(a)<span class="comment">//a =66</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//匿名函数</span></span><br><span class="line"> <span class="keyword">var</span> num = (<span class="function"><span class="keyword">function</span> (<span class="params">a,b</span>) </span>{</span><br><span class="line"> <span class="comment">// alert(a+b);</span></span><br><span class="line"> <span class="keyword">return</span> a+b;</span><br><span class="line"> })(<span class="number">3</span>,<span class="number">4</span>)</span><br><span class="line"> </span><br><span class="line"> alert(num)<span class="comment">//弹7</span></span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">show</span>(<span class="params">a,b</span>) </span>{</span><br><span class="line"> alert(a+b)<span class="comment">//弹7</span></span><br><span class="line"> }</span><br><span class="line"> show(<span class="number">3</span>,<span class="number">4</span>);</span><br></pre></td></tr></table></figure>
<h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><p>JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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"><span class="comment">/*什么闭包：function函数就是一个闭包，闭包里面的变量是封闭的，函数外面不可以获取。主要功能：function里面再嵌套一个函数，把这个函数返回出去 赋给外面的变量，函数外面就可以获取到函数里面的内容 注意的问题：闭包要注意内存溢出的问题，不可以乱用，需要用得才用*/</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> i = <span class="number">5</span>; <span class="comment">// a_i;</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params">n</span>) </span>{</span><br><span class="line"> i += n;<span class="comment">//a_i</span></span><br><span class="line"> <span class="keyword">return</span> i;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> b;</span><br><span class="line">} </span><br><span class="line"><span class="keyword">var</span> c = a();</span><br><span class="line">c(<span class="number">5</span>)</span><br><span class="line">alert(c(<span class="number">5</span>))<span class="comment">//15</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// alert(c(1));6</span></span><br><span class="line"><span class="comment">// alert(c(5));11</span></span><br></pre></td></tr></table></figure>
<h3 id="闭包有什么作用？"><a href="#闭包有什么作用？" class="headerlink" title="闭包有什么作用？"></a>闭包有什么作用？</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></pre></td><td class="code"><pre><span class="line">简而言之，闭包的作用就是在a执行完并返回后，闭包使得javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述，不专业也不严谨，但大概意思就是这样，理解闭包需要循序渐进的过程。</span><br><span class="line"></span><br><span class="line">使用闭包的注意点</span><br><span class="line"></span><br><span class="line">由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。</span><br></pre></td></tr></table></figure>
<h3 id="案例练习"><a href="#案例练习" class="headerlink" title="案例练习"></a>案例练习</h3><p>去重复</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">5</span>,<span class="number">2</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">2</span>,<span class="number">8</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>];</span><br><span class="line"> <span class="comment">// 0 arr[0]==arr[5] 如果是重复 删掉arr[5]</span></span><br><span class="line"> <span class="comment">//splice(5,1)</span></span><br><span class="line"> </span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">noRepeat</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < arr.length; i++) {</span><br><span class="line"> <span class="comment">//每个遍历一次</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = i+<span class="number">1</span>; j < arr.length; j++) {</span><br><span class="line"> <span class="comment">//与后面每个比较</span></span><br><span class="line"> <span class="keyword">if</span> (arr[i]==arr[j]) {</span><br><span class="line"> arr.splice(j,<span class="number">1</span>)<span class="comment">//相同清除</span></span><br><span class="line"> j--;<span class="comment">//清除后，位置变化，j就要返回上一个</span></span><br><span class="line"> }</span><br><span class="line"> } </span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> arr;<span class="comment">//结束返回数组</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> arr = noRepeat();</span><br><span class="line"> alert(arr);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">5</span>,<span class="number">2</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">6</span>,<span class="number">2</span>,<span class="number">8</span>,<span class="number">3</span>,<span class="number">5</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>,<span class="number">9</span>];</span><br><span class="line"> <span class="comment">// 0 arr[0]==arr[5] 如果是重复 删掉arr[5]</span></span><br><span class="line"> <span class="comment">//splice(5,1) </span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">noRepeat</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> newArr = [];<span class="comment">//定义存放数组中不相同的值</span></span><br><span class="line"> newArr.push(arr[<span class="number">0</span>])<span class="comment">//初始化</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">1</span>; i < arr.length; i++) {</span><br><span class="line"> <span class="comment">//每个遍历一次</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j < newArr.length; j++) {</span><br><span class="line"> <span class="comment">//与后面每个比较</span></span><br><span class="line"> <span class="keyword">if</span> (newArr[j]==arr[i]) {</span><br><span class="line"> <span class="comment">//判断新数组的值是否与数组当前值相等，是就退出当前循环</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line"> } </span><br><span class="line"> <span class="comment">/*判断新数组是否完全遍历，如果不是说明新数组的值与数组当前值相等，则不添加入新数组，否则反之*/</span></span><br><span class="line"> <span class="keyword">if</span> (j==newArr.length) {</span><br><span class="line"> newArr.push(arr[i]);</span><br><span class="line"> <span class="comment">// newArr[newArr.length] = arr[i]</span></span><br><span class="line"> } </span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> newArr;<span class="comment">//结束返回数组</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> arr = noRepeat();</span><br><span class="line"> alert(arr);</span><br></pre></td></tr></table></figure>
<h3 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">5</span>,<span class="number">3</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">8</span>,<span class="number">1</span>,<span class="number">7</span>,<span class="number">6</span>];</span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">px</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"i="</span>+<span class="number">0</span>+<span class="string">";j="</span>+<span class="number">0</span>+<span class="string">"-"</span>+arr+<span class="string">"<br>"</span>);</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < arr.length; i++) {</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j = i+<span class="number">1</span>; j < arr.length; j++) {</span><br><span class="line"> <span class="keyword">if</span> (arr[i]>arr[j]) {</span><br><span class="line"> <span class="keyword">var</span> num = arr[i];</span><br><span class="line"> arr[i]=arr[j];</span><br><span class="line"> arr[j]=num; </span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"i="</span>+i+<span class="string">";j="</span>+j+<span class="string">"-"</span>+arr+<span class="string">"<br>"</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">"<br>"</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> arr;</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> arr = px();</span><br><span class="line"> alert(arr);</span><br></pre></td></tr></table></figure>
<h3 id="eval"><a href="#eval" class="headerlink" title="eval"></a>eval</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></pre></td><td class="code"><pre><span class="line">eval() 函数可将字符串转换为代码执行，并返回一个或多个值</span><br><span class="line"></span><br><span class="line">eval调用时，实例为eval( “ javascript代码 “ )</span><br></pre></td></tr></table></figure>
<figure class="highlight"><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">var str = "function(){alert('a');}“;</span><br><span class="line">str = eval(str);</span><br><span class="line">str();</span><br></pre></td></tr></table></figure>
<h3 id="eval-的返回值"><a href="#eval-的返回值" class="headerlink" title="eval()的返回值"></a>eval()的返回值</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></pre></td><td class="code"><pre><span class="line">eval()的返回值遵循以下规则：</span><br><span class="line"></span><br><span class="line">1.如果eval()的参数不是字符串，那么eval()将直接返回参数。 </span><br><span class="line">2.如果eval()的参数是字符串，那么eval()将这个字符串解析成代码后进行执行，并返回最后一行代码执行的结果。 </span><br><span class="line">3.如果字符串无法解析成合法的代码，eval()将抛出错误。</span><br></pre></td></tr></table></figure>
<h3 id="日期对象-Date-amp-amp-定时器"><a href="#日期对象-Date-amp-amp-定时器" class="headerlink" title="日期对象-Date && 定时器"></a>日期对象-Date && 定时器</h3><p>Date</p>
<p>时间戳:是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// var oDate = new Date(2015,5,30);</span></span><br><span class="line"><span class="comment">// var oDate = new Date('2015-6-29');</span></span><br><span class="line"><span class="keyword">var</span> oDate = <span class="keyword">new</span> <span class="built_in">Date</span>()<span class="comment">//当前时间</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> year = oDate.getFullYear();<span class="comment">//获取年份</span></span><br><span class="line"><span class="keyword">var</span> month = oDate.getMonth();<span class="comment">//获取月份 0-11</span></span><br><span class="line"><span class="keyword">var</span> day = oDate.getDate();<span class="comment">//获取多少号</span></span><br><span class="line"><span class="keyword">var</span> week = oDate.getDay();</span><br><span class="line"><span class="comment">//返回星期几，0 表示星期日，6 表示星期六</span></span><br><span class="line"><span class="keyword">var</span> hour = oDate.getHours();<span class="comment">//获取时</span></span><br><span class="line"><span class="keyword">var</span> minutes = oDate.getMinutes()<span class="comment">//获取份</span></span><br><span class="line"><span class="keyword">var</span> second = oDate.getSeconds();<span class="comment">//获取秒</span></span><br><span class="line"><span class="keyword">var</span> time = oDate.getTime();<span class="comment">//获取时间戳</span></span><br><span class="line"><span class="built_in">document</span>.body.innerHTML = <span class="string">''</span>;</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"年份:"</span>+year+<span class="string">"<br>"</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"月份:"</span>+month+<span class="string">"<br>"</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"日:"</span>+day+<span class="string">"<br>"</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"星期:"</span>+week+<span class="string">"<br>"</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"时:"</span>+hour+<span class="string">"<br>"</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"分:"</span>+minutes+<span class="string">"<br>"</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"秒:"</span>+second+<span class="string">"<br>"</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"时间戳:"</span>+time+<span class="string">"<br>"</span>)</span><br></pre></td></tr></table></figure>
<h3 id="setTimeout"><a href="#setTimeout" class="headerlink" title="setTimeout"></a>setTimeout</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*一次性定时器 setTimeout（a,b）; a:函数 b:时间-每隔多少毫秒执行一次a的这个函数*/</span></span><br><span class="line"></span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="string">'一次性定时器'</span>);</span><br><span class="line">},<span class="number">1000</span>)</span><br></pre></td></tr></table></figure>
<h3 id="setInterval"><a href="#setInterval" class="headerlink" title="setInterval"></a>setInterval</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*循环性定时器 setInterval（a,b）; a:函数 b:时间-每隔多少毫秒执行一次a的这个函数*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// setInterval(function(){</span></span><br><span class="line"><span class="comment">// alert('循环性定时器');</span></span><br><span class="line"><span class="comment">// },1000)</span></span><br><span class="line"><span class="keyword">var</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> timer = setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> i++;</span><br><span class="line"> <span class="keyword">if</span> (i><span class="number">5</span>) {</span><br><span class="line"> clearInterval(timer);</span><br><span class="line"> } <span class="keyword">else</span> { </span><br><span class="line"> <span class="comment">//alert('循环性定时器');</span></span><br><span class="line"> }</span><br><span class="line">},<span class="number">1000</span>)</span><br></pre></td></tr></table></figure>
<h3 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h3><p>倒计时的实现</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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">setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> oDate = <span class="keyword">new</span> <span class="built_in">Date</span>()<span class="comment">//当前时间</span></span><br><span class="line"> <span class="keyword">var</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"2016-6-9"</span>);</span><br><span class="line"> <span class="comment">//计算当前时间到端午节的时间戳 秒数</span></span><br><span class="line"> <span class="keyword">var</span> time = <span class="built_in">parseInt</span>((d-oDate)/<span class="number">1000</span>);</span><br><span class="line"> <span class="comment">//剩余天数 = 秒/（24*60*60）</span></span><br><span class="line"> <span class="keyword">var</span> day = <span class="built_in">parseInt</span>(time/<span class="number">86400</span>);</span><br><span class="line"> <span class="comment">//剩余小时数 = 秒%（24*60*60）/(60*60)</span></span><br><span class="line"> <span class="keyword">var</span> h = <span class="built_in">parseInt</span>(time%<span class="number">86400</span>/<span class="number">3600</span>);</span><br><span class="line"> <span class="comment">//剩余分钟数 = 秒%(60*60)/60</span></span><br><span class="line"> <span class="keyword">var</span> m = <span class="built_in">parseInt</span>(time%<span class="number">3600</span>/<span class="number">60</span>);</span><br><span class="line"> <span class="comment">//剩余秒数 = 秒%60</span></span><br><span class="line"> <span class="keyword">var</span> s = <span class="built_in">parseInt</span>(time%<span class="number">60</span>);</span><br><span class="line"></span><br><span class="line"> <span class="built_in">document</span>.body.innerHTML = <span class="string">"距离端午节放假还有："</span>+day+<span class="string">"天-"</span>+h+<span class="string">"小时-"</span>+m+<span class="string">"分"</span>+s+<span class="string">"秒"</span>;</span><br><span class="line">},<span class="number">1000</span>)</span><br></pre></td></tr></table></figure>
<h3 id="时钟的实现"><a href="#时钟的实现" class="headerlink" title="时钟的实现"></a>时钟的实现</h3><p>HTML部分</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>CSS部分</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.wrap</span>{</span><br><span class="line"><span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"><span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line"><span class="attribute">border</span>: <span class="number">1px</span> solid powderblue;</span><br><span class="line"><span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line"><span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line"><span class="attribute">position</span>: relative;</span><br><span class="line"><span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">0.5px</span> <span class="number">1px</span> <span class="number">3px</span> <span class="number">#87ceeb</span> inset;</span><br><span class="line"><span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-class">.seconds</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">15px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1.5px</span>;</span><br><span class="line"> <span class="attribute">background</span>: paleturquoise;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">z-index</span>: -<span class="number">2</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">1px</span> skyblue;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-class">.time</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">background</span>: skyblue;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">1px</span> black;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-class">.time</span> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span> <span class="number">50%</span> <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-class">.seconds</span><span class="selector-pseudo">:nth-child(5n+1)</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">1.5px</span>;</span><br><span class="line"> <span class="attribute">background</span>: black;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-class">.time</span> <span class="selector-class">.s</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">2px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">230px</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(0deg) <span class="built_in">translateY</span>(-80px);</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">2px</span> black;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-class">.time</span> <span class="selector-class">.m</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">4px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">background</span>: dodgerblue;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(0deg) <span class="built_in">translateY</span>(-70px);</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">2px</span> black;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-class">.time</span> <span class="selector-class">.h</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">6px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">180px</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">background</span>: cadetblue;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(0deg) <span class="built_in">translateY</span>(-60px);</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">2px</span> black;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>JS部分</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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"><span class="comment">//画出时钟</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">'<div class="wrap">'</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < <span class="number">60</span>; i ++) {</span><br><span class="line"><span class="comment">//画出刻度</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"<span class='seconds' style='transform: rotate("</span>+i*<span class="number">6</span>+<span class="string">"deg) translate(190px)'></span>"</span>)</span><br><span class="line">}</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"<div class='time'>"</span>)</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"<div class='h'></div>"</span>);<span class="comment">//时针</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"<div class='m'></div>"</span>);<span class="comment">//分针</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"<div class='s'></div>"</span>);<span class="comment">//秒针</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">"</div>"</span>);<span class="comment">//类time结束</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">'</div>'</span>);<span class="comment">//类wrap结束</span></span><br><span class="line"><span class="comment">//通过类获取时分秒针</span></span><br><span class="line"><span class="keyword">var</span> s = <span class="built_in">document</span>.getElementsByClassName(<span class="string">'s'</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">var</span> m = <span class="built_in">document</span>.getElementsByClassName(<span class="string">'m'</span>)[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">var</span> h = <span class="built_in">document</span>.getElementsByClassName(<span class="string">'h'</span>)[<span class="number">0</span>];</span><br><span class="line">timer();<span class="comment">//初始分秒的旋转角度</span></span><br><span class="line">setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="comment">//循坏计时，每秒刷新一次达到时钟效果</span></span><br><span class="line"> timer();</span><br><span class="line">},<span class="number">1000</span>)</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">timer</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="comment">//获取当前时分秒的旋转角度</span></span><br><span class="line"> <span class="keyword">var</span> oDate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"> <span class="comment">//秒针一圈60刻度，每秒6度，所以得出每秒旋转6度</span></span><br><span class="line"> s.style.transform = <span class="string">'rotate('</span>+(oDate.getSeconds()*<span class="number">6</span>)+<span class="string">'deg) translateY(-80px)'</span>;</span><br><span class="line"> <span class="comment">//分针一圈60刻度，每分6度，每秒旋转 秒/360*6*6所以得出每秒旋转oDate.getMinutes()*6+oDate.getSeconds()*0.1度</span></span><br><span class="line"> m.style.transform = <span class="string">'rotate('</span>+(oDate.getMinutes()*<span class="number">6</span>+oDate.getSeconds()*<span class="number">0.1</span>)+<span class="string">'deg) translateY(-70px)'</span>;</span><br><span class="line"> <span class="comment">//时针一圈12刻度，每时30度，每分旋转 分/360*30*6所以得出每分旋转oDate.getHours()*30+oDate.getMinutes()*0.5度</span></span><br><span class="line"> h.style.transform = <span class="string">'rotate('</span>+(oDate.getHours()*<span class="number">30</span>+oDate.getMinutes()*<span class="number">0.5</span>)+<span class="string">'deg) translateY(-60px)'</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="browser—浏览器检测"><a href="#browser—浏览器检测" class="headerlink" title="browser—浏览器检测"></a>browser—浏览器检测</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></pre></td><td class="code"><pre><span class="line">对于网站开发人员来说，浏览器信息和统计数据都是非常重要的。</span><br><span class="line"></span><br><span class="line">浏览器信息</span><br><span class="line"></span><br><span class="line">Internet Explorer</span><br><span class="line"></span><br><span class="line">微软的 Internet Explorer(IE) 是当今最流行的因特网浏览器。它发布于 1995 年，并于 1998 年在使用人数上超过了 Netscape。</span><br><span class="line"></span><br><span class="line">Netscape</span><br><span class="line"></span><br><span class="line">Netscape 是首个商业化的因特网浏览器。它发布于 1994 年。在 IE 的竞争下，Netscape 逐渐丧失了它的市场份额。</span><br><span class="line"></span><br><span class="line">Mozilla</span><br><span class="line"></span><br><span class="line">Mozilla 项目是从 Netscape 的基础上发展起来的。今天，基于 Mozilla 的浏览器已经演变为因特网上第二大的浏览器家族，市场份额为大约 20%。</span><br><span class="line"></span><br><span class="line">Firefox</span><br><span class="line"></span><br><span class="line">Firefox 是由 Mozilla 发展而来的新式浏览器。它发布于 2004 年，并已成长为因特网上第二大最流行的浏览器。</span><br><span class="line"></span><br><span class="line">Opera</span><br><span class="line"></span><br><span class="line">Opera 是挪威人发明的因特网浏览器。它以下列特性而闻名于世：快速小巧、符合工业标准、适用于多种操作系统。对于一系列小型设备诸如手机和掌上电脑来说，Opera 无疑是首选的浏览器。</span><br><span class="line"></span><br><span class="line">Chrome</span><br><span class="line"></span><br><span class="line">Chrome 是免费的开源 web 浏览器，它由 Google 开发。该浏览器于 2008 年 9 月发布。</span><br><span class="line"></span><br><span class="line">Safari</span><br><span class="line"></span><br><span class="line">Safari 是由苹果公司开发的浏览器，适用于 Mac 和 Windows 系统。该浏览器于 2003 年 6 月发布。</span><br></pre></td></tr></table></figure>
<p>js判断浏览器</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="built_in">window</span>.navigator.userAgent;</span><br><span class="line"><span class="comment">//获取浏览器信息</span></span><br><span class="line"><span class="comment">//查找字符判断浏览器类型</span></span><br><span class="line"><span class="keyword">if</span>(a.indexOf(<span class="string">'OPR'</span>)><span class="number">-1</span>){</span><br><span class="line"> alert(<span class="string">'欧朋'</span>)</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span>(a.indexOf(<span class="string">'Chrome'</span>)><span class="number">-1</span>){</span><br><span class="line"> alert(<span class="string">'谷歌'</span>)</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span> (a.indexOf(<span class="string">'Firefox'</span>)><span class="number">-1</span>){</span><br><span class="line"> alert(<span class="string">'火狐'</span>)</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span>(<span class="string">'Safari'</span>){</span><br><span class="line"> alert(<span class="string">'苹果'</span>)</span><br><span class="line">}<span class="keyword">else</span> <span class="keyword">if</span>(<span class="string">'IE 8'</span>){</span><br><span class="line"> alert(<span class="string">'IE 8'</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="程序猿经典案例之计算器"><a href="#程序猿经典案例之计算器" class="headerlink" title="程序猿经典案例之计算器"></a>程序猿经典案例之计算器</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></pre></td><td class="code"><pre><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">小数点功能</span><br><span class="line">清除功能</span><br><span class="line">正负数功能</span><br><span class="line">求百分数功能</span><br><span class="line">查漏补缺</span><br></pre></td></tr></table></figure>
<p>HTML部分</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>计算器<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrap"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"header"</span>></span>0<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"btns"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>AC<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>+/-<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>%<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"o"</span>></span>/<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>7<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>8<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>9<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"o"</span>></span>*<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>4<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>5<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>6<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"o"</span>></span>-<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>1<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>2<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center"</span>></span>3<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"o"</span>></span>+<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center long under"</span>></span>0<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"center under"</span>></span>.<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span> <span class="attr">class</span>=<span class="string">"under o"</span>></span>=<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>CSS部分</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.wrap</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">232px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">320px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#8e8e8e</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">50px</span> auto;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#header</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">80px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(90,90,90,0.6);</span><br><span class="line"> <span class="attribute">text-align</span>: right;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">color</span>: white;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">60px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#btns</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">list-style</span>: none;</span><br><span class="line"> <span class="attribute">overflow</span>: hidden;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">} </span><br><span class="line"><span class="selector-id">#btns</span> <span class="selector-tag">li</span>{</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">float</span>: left;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">57px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">47px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">47px</span>;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#8e8e8e</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#d6d6d6</span>;</span><br><span class="line"> <span class="attribute">cursor</span>: pointer;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#btns</span> <span class="selector-class">.long</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">115px</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#btns</span> <span class="selector-class">.center</span>{</span><br><span class="line"> <span class="attribute">border-right</span>: <span class="number">1px</span> solid <span class="number">#8e8e8e</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#btns</span> <span class="selector-class">.o</span>{</span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#f49437</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">58px</span>;</span><br><span class="line"> <span class="attribute">color</span>: white;</span><br><span class="line">}</span><br><span class="line"><span class="selector-id">#btns</span> <span class="selector-class">.under</span>{</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">48px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>js部分</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//获取计算框</span></span><br><span class="line"> <span class="keyword">var</span> header = <span class="built_in">document</span>.getElementById(<span class="string">'header'</span>);</span><br><span class="line"> <span class="comment">//获取所有按钮</span></span><br><span class="line"> <span class="keyword">var</span> li =<span class="built_in">document</span>.getElementsByTagName(<span class="string">'li'</span>);</span><br><span class="line"> <span class="comment">//定义上一个数 保存第一个数</span></span><br><span class="line"> <span class="keyword">var</span> per_number = <span class="literal">null</span>;</span><br><span class="line"> <span class="comment">//定义下一个数 保存第二个数</span></span><br><span class="line"> <span class="keyword">var</span> next_number = <span class="literal">null</span>;</span><br><span class="line"> <span class="comment">//定义一个字符串类型保存运算符</span></span><br><span class="line"> <span class="keyword">var</span> operation = <span class="string">''</span>;</span><br><span class="line"> <span class="comment">//记录符号的类型，1为无，0为运算符，2为等于号</span></span><br><span class="line"> <span class="keyword">var</span> flag = <span class="number">0</span>;</span><br><span class="line"> <span class="comment">//给所有按钮添加点击事件</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i<li.length;i++) {</span><br><span class="line"> li[i].onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">switch</span> (<span class="keyword">this</span>.innerHTML){</span><br><span class="line"> <span class="comment">//清除按钮的点击事件</span></span><br><span class="line"> <span class="keyword">case</span> <span class="string">'C'</span>:</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'AC'</span>:</span><br><span class="line"> <span class="comment">//把所有数据以及变量都初始化</span></span><br><span class="line"> per_number = <span class="literal">null</span>;</span><br><span class="line"> next_number = <span class="literal">null</span>;</span><br><span class="line"> operation = <span class="string">""</span>;</span><br><span class="line"> flag = <span class="number">0</span>;</span><br><span class="line"> header.innerHTML = <span class="string">"0"</span>;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="comment">//正负切换按钮的点击事件</span></span><br><span class="line"> <span class="keyword">case</span><span class="string">'+/-'</span>:</span><br><span class="line"> header.innerHTML= <span class="number">-1</span>*<span class="built_in">Number</span>(header.innerHTML);</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="comment">//百分比的点击事件</span></span><br><span class="line"> <span class="keyword">case</span><span class="string">'%'</span>:</span><br><span class="line"> header.innerHTML = <span class="built_in">Number</span>(header.innerHTML)/<span class="number">100</span>;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="comment">//数字按钮的点击事件</span></span><br><span class="line"> <span class="keyword">case</span><span class="string">'1'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'2'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'3'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'4'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'5'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'6'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'7'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'8'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'9'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'0'</span>:</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">if</span> (header.innerHTML == <span class="string">"0"</span> || flag==<span class="number">0</span> || flag==<span class="number">2</span>) {</span><br><span class="line"> <span class="comment">/*当计算框为零，或者刚点击完运算符，或者刚点击完等于号时*/</span></span><br><span class="line"> header.innerHTML = <span class="keyword">this</span>.innerHTML;<span class="comment">//赋值</span></span><br><span class="line"> <span class="keyword">if</span>(flag==<span class="number">2</span>){</span><br><span class="line"> <span class="comment">//刚点击完等于号时</span></span><br><span class="line"> per_number = <span class="literal">null</span>;</span><br><span class="line"> <span class="comment">//清空第一个数</span></span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//修改点击符号为数字</span></span><br><span class="line"> flag = <span class="number">1</span>;</span><br><span class="line"> } </span><br><span class="line"> <span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//否则拼接字符串</span></span><br><span class="line"> header.innerHTML += <span class="keyword">this</span>.innerHTML;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="comment">//四则运算的点击事件</span></span><br><span class="line"> <span class="keyword">case</span><span class="string">'+'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'-'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'*'</span>:</span><br><span class="line"> <span class="keyword">case</span><span class="string">'/'</span>:</span><br><span class="line"> <span class="keyword">if</span>(per_number == <span class="literal">null</span> || flag == <span class="number">2</span>){</span><br><span class="line"> <span class="comment">/*第一个数为空，或者刚点击完等于号时，第一个数等于计算框里的数字*/</span></span><br><span class="line"> per_number = <span class="built_in">Number</span>(header.innerHTML);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(operation != <span class="string">''</span> && flag!=<span class="number">0</span>){</span><br><span class="line"> <span class="comment">/*运算符不等于空，或者不是刚点击完运算符时，第二个数等于计算框里的数字*/</span></span><br><span class="line"> next_number = <span class="built_in">Number</span>(header.innerHTML);</span><br><span class="line"> _equals(operation);<span class="comment">//进行四则运算</span></span><br><span class="line"> }</span><br><span class="line"> flag = <span class="number">0</span>;<span class="comment">//修改点击符号为运算符</span></span><br><span class="line"> operation =<span class="keyword">this</span>.innerHTML;<span class="comment">//保存运算符</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="comment">//等于的点击事件</span></span><br><span class="line"> <span class="keyword">case</span><span class="string">'='</span>:</span><br><span class="line"> <span class="keyword">if</span>(operation != <span class="string">''</span>){</span><br><span class="line"> <span class="comment">//运算符不为空时</span></span><br><span class="line"> <span class="keyword">if</span>(flag == <span class="number">1</span>){</span><br><span class="line"> <span class="comment">/*刚点击完数字时，第二个数等于计算框里的数字*/</span></span><br><span class="line"> next_number = <span class="built_in">Number</span>(header.innerHTML);</span><br><span class="line"> }</span><br><span class="line"> _equals(operation);<span class="comment">//进行四则运算</span></span><br><span class="line"> }</span><br><span class="line"> flag = <span class="number">2</span>;<span class="comment">//修改点击符号为等于号</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="comment">//.的点击事件</span></span><br><span class="line"> <span class="keyword">default</span>:</span><br><span class="line"> <span class="keyword">if</span> (header.innerHTML == <span class="string">"0"</span> || flag==<span class="number">0</span> || flag==<span class="number">2</span>) {</span><br><span class="line"> <span class="comment">/*当计算框为零，或者刚点击完运算符，或者刚点击完等于号时，输出0.*/</span></span><br><span class="line"> header.innerHTML = <span class="string">'0'</span>+<span class="keyword">this</span>.innerHTML;</span><br><span class="line"> flag = <span class="number">1</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="keyword">if</span>(header.innerHTML.indexOf(<span class="string">'.'</span>,<span class="number">0</span>) == <span class="number">-1</span>){</span><br><span class="line"> <span class="comment">//计算框内没有.时，拼接0.</span></span><br><span class="line"> header.innerHTML += <span class="keyword">this</span>.innerHTML;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//AC与C的切换</span></span><br><span class="line"> <span class="keyword">if</span>((li[<span class="number">0</span>].innerHTML == <span class="string">'AC'</span> || <span class="keyword">this</span>.innerHTML != li[<span class="number">0</span>].innerHTML) && <span class="keyword">this</span>.innerHTML!=<span class="string">"AC"</span>){</span><br><span class="line"> <span class="comment">/*清除键内容为 AC或者当前点击不是清除键,和当前点击内容不是AC*/</span></span><br><span class="line"> li[<span class="number">0</span>].innerHTML =<span class="string">'C'</span>;<span class="comment">//修改清除键内容为C</span></span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> li[<span class="number">0</span>].innerHTML =<span class="string">'AC'</span>;<span class="comment">//修改清除键内容为AC</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//文档点击事件，设置计算框自适应字体大小</span></span><br><span class="line"> <span class="built_in">document</span>.onclick =<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(header.innerHTML.length<<span class="number">8</span>){</span><br><span class="line"> <span class="comment">//计算框内容长度小于8时，字体大小为60px</span></span><br><span class="line"> header.style.fontSize = <span class="string">"60px"</span></span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(header.innerHTML.length<<span class="number">16</span>){</span><br><span class="line"> <span class="comment">//计算框内容长度大于8小于16时，字体大小为30px</span></span><br><span class="line"> header.style.fontSize = <span class="string">"30px"</span>;</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(header.innerHTML.length<<span class="number">24</span>){</span><br><span class="line"> <span class="comment">//计算框内容长度大于16小于24时，字体大小为20px</span></span><br><span class="line"> header.style.fontSize = <span class="string">"20px"</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span>(header.innerHTML.length<<span class="number">30</span>){</span><br><span class="line"> <span class="comment">//计算框内容长度大于24小于30时，字体大小为16px</span></span><br><span class="line"> header.style.fontSize = <span class="string">"16px"</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//计算框内容长度大于30时，字体大小为12px</span></span><br><span class="line"> header.style.fontSize = <span class="string">"12px"</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//四则运算的函数</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">_equals</span>(<span class="params">operation</span>)</span>{</span><br><span class="line"> <span class="keyword">switch</span> (operation){</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'+'</span>:<span class="comment">//加运算符</span></span><br><span class="line"> per_number += next_number;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'-'</span>:<span class="comment">//减运算符</span></span><br><span class="line"> per_number -= next_number;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'*'</span>:<span class="comment">//乘运算符</span></span><br><span class="line"> per_number *= next_number;</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'/'</span>:<span class="comment">//除运算符</span></span><br><span class="line"> <span class="keyword">if</span>(next_number ==<span class="number">0</span> ){</span><br><span class="line"> <span class="comment">//0为被除数时</span></span><br><span class="line"> per_number = <span class="literal">null</span>;</span><br><span class="line"> <span class="comment">//设置计算结果为空</span></span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> per_number /= next_number;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">if</span>(per_number == <span class="literal">null</span>){</span><br><span class="line"> <span class="comment">//计算结果为空时，输出非数字NaN</span></span><br><span class="line"> header.innerHTML = <span class="literal">NaN</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> header.innerHTML = per_number;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>以上例子仅供参考！！！！感谢您的阅读，祝您学习愉快！！</p>
<h3 id="String-amp-dorpdownlist-下拉列表"><a href="#String-amp-dorpdownlist-下拉列表" class="headerlink" title="String & dorpdownlist(下拉列表)"></a>String & dorpdownlist(下拉列表)</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></pre></td><td class="code"><pre><span class="line">String</span><br><span class="line"></span><br><span class="line">String 对象</span><br><span class="line">String 对象用于处理文本（字符串）。</span><br><span class="line"></span><br><span class="line">String 对象属性</span><br><span class="line"></span><br><span class="line">constructor 对创建该对象的函数的引用</span><br><span class="line">length 字符串的长度</span><br><span class="line">prototype 允许您向对象添加属性和方法</span><br><span class="line">String 对象方法</span><br><span class="line"></span><br><span class="line">anchor() 创建 HTML 锚。</span><br><span class="line">big() 用大号字体显示字符串。</span><br><span class="line">blink() 显示闪动字符串。</span><br><span class="line">bold() 使用粗体显示字符串。</span><br><span class="line">charAt() 返回在指定位置的字符。</span><br><span class="line">charCodeAt() 返回在指定的位置的字符的 Unicode 编码。</span><br><span class="line">concat() 连接字符串。</span><br><span class="line">fixed() 以打字机文本显示字符串。</span><br><span class="line">fontcolor() 使用指定的颜色来显示字符串。</span><br><span class="line">fontsize() 使用指定的尺寸来显示字符串。</span><br><span class="line">fromCharCode() 从字符编码创建一个字符串。</span><br><span class="line">indexOf() 检索字符串。</span><br><span class="line">italics() 使用斜体显示字符串。</span><br><span class="line">lastIndexOf() 从后向前搜索字符串。</span><br><span class="line">link() 将字符串显示为链接。</span><br><span class="line">localeCompare() 用本地特定的顺序来比较两个字符串。</span><br><span class="line">match() 找到一个或多个正则表达式的匹配。</span><br><span class="line">replace() 替换与正则表达式匹配的子串。</span><br><span class="line">search() 检索与正则表达式相匹配的值。</span><br><span class="line">slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。</span><br><span class="line">small() 使用小字号来显示字符串。</span><br><span class="line">split() 把字符串分割为字符串数组。</span><br><span class="line">strike() 使用删除线来显示字符串。</span><br><span class="line">sub() 把字符串显示为下标。</span><br><span class="line">substr() 从起始索引号提取字符串中指定数目的字符。</span><br><span class="line">substring() 提取字符串中两个指定的索引号之间的字符。</span><br><span class="line">sup() 把字符串显示为上标。</span><br><span class="line">toLocaleLowerCase() 把字符串转换为小写。</span><br><span class="line">toLocaleUpperCase() 把字符串转换为大写。</span><br><span class="line">toLowerCase() 把字符串转换为小写。</span><br><span class="line">toUpperCase() 把字符串转换为大写。</span><br><span class="line">toSource() 代表对象的源代码。</span><br><span class="line">toString() 返回字符串。</span><br><span class="line">valueOf() 返回某个字符串对象的原始值。</span><br></pre></td></tr></table></figure>
<p>案例：字符串的截取</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">50px</span> auto;</span><br><span class="line"> <span class="attribute">background</span>: khaki;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">10px</span> solid gainsboro;</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span><br><span class="line"> <span class="comment">//获取内容标签span</span></span><br><span class="line"> <span class="comment">//获取点击按钮a</span></span><br><span class="line"> <span class="comment">//获取标签内容str</span></span><br><span class="line"> <span class="comment">//点击收缩时显示str截取后的内容</span></span><br><span class="line"> <span class="comment">//点击展开时显示str全部内容</span></span><br><span class="line"> </span><br><span class="line"> <span class="built_in">window</span>.onload =<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> span = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'span'</span>)[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> a = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'a'</span>)[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> str =span.innerText;</span><br><span class="line"> <span class="comment">//span完整内容</span></span><br><span class="line"> a.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(span.innerHTML == str){</span><br><span class="line"> <span class="comment">//判断内容是否被截取</span></span><br><span class="line"> span.innerText = str.substring(<span class="number">0</span>,<span class="number">30</span>) + <span class="string">"......"</span>;<span class="comment">//显示str截取后的内容</span></span><br><span class="line"> a.innerHTML = <span class="string">">>展开"</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> span.innerText = str;</span><br><span class="line"> <span class="comment">//显示str的内容</span></span><br><span class="line"> a.innerHTML = <span class="string">">>收缩"</span>;</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><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>蓝鸥科技是美国苹果公司AATC官方授权培训机构，是国内专业的移动互联网研发实训基地，致力于iOS、安卓、Unity、HTML5等开发人才的培养。2012年由中国知名移动开发专家刘辉、李静波和崔亚允创立。蓝鸥科技拥有北京、上海、广州、大连、郑州和西安等众多实训中心，合作院校超过500所，战略合作企业800多家。截至目前，在苹果App Store和谷歌商店累计上线1000多款应用和游戏。<span class="tag"></<span class="name">span</span>></span><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"###"</span>></span>>>收缩<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>案例 字符串方法以及查找字符</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span><br><span class="line"> <span class="keyword">var</span> str = <span class="string">"我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串我是字符串"</span>;</span><br><span class="line"> <span class="comment">/*字符串截取方法substring, substring里面最小参数是0（负数也是0）*/</span></span><br><span class="line"> <span class="comment">/*里面的参数是从最小截取到最大的位置（读取时先找到最小，再往最大截取）*/</span></span><br><span class="line"> <span class="comment">// var str2 = str.substring(2,5);</span></span><br><span class="line"> <span class="comment">// alert(str2);</span></span><br><span class="line"> <span class="comment">/*查找的方法 indexOf() 返回位置值 如果找不到返回-1 只会找一次*/</span></span><br><span class="line"> <span class="comment">//alert(str.indexOf('字',3));</span></span><br><span class="line"> <span class="keyword">var</span> i = <span class="number">0</span> ;</span><br><span class="line"> <span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">while</span> (str.indexOf(<span class="string">'字'</span>,i) > <span class="number">-1</span>) {</span><br><span class="line"> <span class="comment">//在找到的时候循环</span></span><br><span class="line"> sum ++;<span class="comment">//找到后+1</span></span><br><span class="line"> i=str.indexOf(<span class="string">'字'</span>,i) + <span class="number">1</span>;</span><br><span class="line"> <span class="comment">//在位置之后再开始查找</span></span><br><span class="line"> }</span><br><span class="line"> alert(<span class="string">"str中字共有"</span>+sum+<span class="string">"个"</span>);</span><br><span class="line"> <span class="comment">// 1 i=0 位置2>-1 sum ++ ; i = 位置2 +1;</span></span><br><span class="line"> <span class="comment">//2 i=3 位置7>-1 sum ++ ; i = 位置7 +1;</span></span><br><span class="line"> <span class="comment">//3 i=8 位置13>-1 sum ++ ; i = 位置13 +1;</span></span><br><span class="line"> <span class="comment">//...</span></span><br><span class="line"> <span class="comment">//2 i=？ 位置-1不大于-1 退出循环 弹出对话框</span></span><br><span class="line"> </span><br><span class="line"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>案例 字符串与数组</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span><br><span class="line"> <span class="keyword">var</span> str = <span class="string">"abcdefg"</span>;</span><br><span class="line"> <span class="keyword">var</span> arr = [<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'c'</span>,<span class="string">'d'</span>,<span class="string">'e'</span>,<span class="string">'f'</span>,<span class="string">'g'</span>];</span><br><span class="line"> <span class="comment">//字符串不可以通过下标修改其中的值，只能整体修改</span></span><br><span class="line"> str[<span class="number">3</span>] = <span class="string">"D"</span>;</span><br><span class="line"> <span class="comment">// alert(str);</span></span><br><span class="line"> arr[<span class="number">3</span>] = <span class="string">"D"</span>;</span><br><span class="line"> <span class="comment">// alert(arr);</span></span><br><span class="line"> <span class="comment">//字符串变成数组</span></span><br><span class="line"> <span class="comment">//split 把字符串劈开变成数组 劈开是按照字符串里的参数</span></span><br><span class="line"> <span class="keyword">var</span> arr =str.split(<span class="string">"d"</span>);</span><br><span class="line"> <span class="comment">//alert(arr[1]);</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//charAt 获取字符串里的第几个字符 从0开始</span></span><br><span class="line"> <span class="comment">//charCodeAt 获取字符串里的第几个字符的字符Ascii</span></span><br><span class="line"> <span class="comment">// alert(str.charAt(2));</span></span><br><span class="line"> <span class="comment">//alert(str.charCodeAt(2));</span></span><br><span class="line"></span><br><span class="line"> <span class="comment">//alert(str.toLowerCase());变成小写</span></span><br><span class="line"> <span class="comment">//alert(str.toUpperCase());变成大写</span></span><br><span class="line"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>dorpdownlist(下拉列表)</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="undefined"></span><br><span class="line"> .droplist input{</span><br><span class="line"> width: 150px;</span><br><span class="line"> height: 30px;</span><br><span class="line"> font-size: 14px;</span><br><span class="line"> font-weight: lighter;</span><br><span class="line"> text-align: center;</span><br><span class="line"> border: 1px solid cadetblue;</span><br><span class="line"> border-radius: 6px;</span><br><span class="line"> border-color: cornflowerblue;</span><br><span class="line"> box-shadow: 0.1px 0.1px 1px 0.5px cadetblue;</span><br><span class="line"> background: white;</span><br><span class="line"> }</span><br><span class="line"> .droplist ul{</span><br><span class="line"> width: 150px;</span><br><span class="line"> border: 1px solid cadetblue;</span><br><span class="line"> border-radius: 6px;</span><br><span class="line"> list-style: none;</span><br><span class="line"> color: #333;</span><br><span class="line"> text-align: center;</span><br><span class="line"> margin-top: 5px;</span><br><span class="line"> padding: 0; </span><br><span class="line"> }</span><br><span class="line"> .droplist ul li{</span><br><span class="line"> width: 98%;</span><br><span class="line"> padding: 10px 0;</span><br><span class="line"> margin: 0 auto;</span><br><span class="line"> border-bottom: 1px solid #ccc;;</span><br><span class="line"> }</span><br><span class="line"> .droplist ul li:hover{</span><br><span class="line"> background: rgba(244,244,244,0.75);</span><br><span class="line"> }</span><br><span class="line"> .droplist ul li:nth-child(3){</span><br><span class="line"> border: 0;</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span><br><span class="line"> <span class="built_in">window</span>.onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//做法思路</span></span><br><span class="line"> <span class="comment">//1.获取元素</span></span><br><span class="line"> <span class="comment">//2.点击请选择-列表显示</span></span><br><span class="line"> <span class="comment">//3.点击列表-选择框内容 = 你点击列表框的内容</span></span><br><span class="line"> <span class="comment">//4.列表消失</span></span><br><span class="line"> <span class="comment">//这里获取document.getElementsByClassName('btn')是一个数组：['按钮']，而我们要获取的是'按钮'，所以读取是['按钮'][0],也就是document.getElementsByClassName('btn')[0]</span></span><br><span class="line"> <span class="keyword">var</span> btn =<span class="built_in">document</span>.getElementsByClassName(<span class="string">'btn'</span>)[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> list =<span class="built_in">document</span>.getElementById(<span class="string">'list'</span>);</span><br><span class="line"> <span class="keyword">var</span> li = list.getElementsByTagName(<span class="string">'li'</span>);<span class="comment">//获取list里的<li>集合</span></span><br><span class="line"> </span><br><span class="line"> <span class="comment">//选择按钮</span></span><br><span class="line"> btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(list.style.display != <span class="string">"block"</span>){</span><br><span class="line"> <span class="comment">//判断list是否已经隐藏</span></span><br><span class="line"> <span class="comment">//是，就显示</span></span><br><span class="line"> list.style.display = <span class="string">'block'</span>;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//否，就隐藏</span></span><br><span class="line"> list.style.display = <span class="string">'none'</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<li.length; i++) {</span><br><span class="line"> <span class="comment">//循环，给每个<li>添加点击事件</span></span><br><span class="line"> li[i].onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">/*注：input里的内容获取是-input.value，其他标签的内容获取是-标签.innerHTML*/</span></span><br><span class="line"> btn.value = <span class="keyword">this</span>.innerHTML;<span class="comment">/*将当前<li>里的内容赋值给btn*/</span></span><br><span class="line"> list.style.display = <span class="string">'none'</span>;</span><br><span class="line"> <span class="comment">//列表消失</span></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><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"droplist"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">value</span>=<span class="string">"请选择"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">ul</span> <span class="attr">id</span>=<span class="string">"list"</span> <span class="attr">style</span>=<span class="string">"display: none;"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>栗子<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>李子<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>芒果<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<h3 id="Math-amp-Array-数组"><a href="#Math-amp-Array-数组" class="headerlink" title="Math & Array(数组)"></a>Math & Array(数组)</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></pre></td><td class="code"><pre><span class="line">Math</span><br><span class="line"></span><br><span class="line">Math对象允许您执行数学任务。</span><br><span class="line">Math对象包括几个数学方法。</span><br><span class="line"></span><br><span class="line">Math 对象属性</span><br><span class="line"></span><br><span class="line">E 返回算术常量 e，即自然对数的底数（约等于2.718）。</span><br><span class="line">LN2 返回 2 的自然对数（约等于0.693）。</span><br><span class="line">LN10 返回 10 的自然对数（约等于2.302）。</span><br><span class="line">LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。</span><br><span class="line">LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。</span><br><span class="line">PI 返回圆周率（约等于3.14159）。</span><br><span class="line">SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。</span><br><span class="line">SQRT2 返回 2 的平方根（约等于 1.414）。</span><br><span class="line">Math 对象方法</span><br><span class="line"></span><br><span class="line">abs(x) 返回数的绝对值。</span><br><span class="line">acos(x) 返回数的反余弦值。</span><br><span class="line">asin(x) 返回数的反正弦值。</span><br><span class="line">atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。</span><br><span class="line">atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。</span><br><span class="line">ceil(x) 对数进行上舍入。</span><br><span class="line">cos(x) 返回数的余弦。</span><br><span class="line">exp(x) 返回 e 的指数。</span><br><span class="line">floor(x) 对数进行下舍入。</span><br><span class="line">log(x) 返回数的自然对数（底为e）。</span><br><span class="line">max(x,y) 返回 x 和 y 中的最高值。</span><br><span class="line">min(x,y) 返回 x 和 y 中的最低值。</span><br><span class="line">pow(x,y) 返回 x 的 y 次幂。</span><br><span class="line">random() 返回 0 ~ 1 之间的随机数。</span><br><span class="line">round(x) 把数四舍五入为最接近的整数。</span><br><span class="line">sin(x) 返回数的正弦。</span><br><span class="line">sqrt(x) 返回数的平方根。</span><br><span class="line">tan(x) 返回角的正切。</span><br><span class="line">toSource() 返回该对象的源代码。</span><br><span class="line">valueOf() 返回 Math 对象的原始值。</span><br></pre></td></tr></table></figure>
<p>解析：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>);</span><br><span class="line"><span class="comment">//ceil:ceil() 向上取整5.00001，取6</span></span><br><span class="line"><span class="comment">//var num = 5.00001;</span></span><br><span class="line"><span class="comment">//alert(Math.ceil(num));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//floor:floor()向下取整，5.9999999，取5</span></span><br><span class="line"><span class="comment">//var num1 = 5.9999999;</span></span><br><span class="line"><span class="comment">//alert(Math.floor(num));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*Math.min（）和Math.max（）可以用来查找的参数列表中的最低或最高值*/</span></span><br><span class="line"><span class="comment">//max:max()</span></span><br><span class="line"><span class="comment">//alert(Math.max(1,9,5,2,3));//9</span></span><br><span class="line"><span class="comment">//min:min()</span></span><br><span class="line"><span class="comment">//alert(Math.min(1,9,5,2,3));//1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//pow:pow()求次方数</span></span><br><span class="line"><span class="comment">// alert(Math.pow(2,3));8----2的3次方</span></span><br><span class="line"><span class="comment">//random:random()随机数，取值在0-1之间，不包括0和1 最小0.0000000......1 最大0.99999...9</span></span><br><span class="line"><span class="comment">//alert(Math.random());</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//栗子 0-10最小值</span></span><br><span class="line"><span class="comment">//0.00001*10 = 0.0001 四舍五入得 0</span></span><br><span class="line"><span class="comment">//0.99999*10 =9.9999 四舍五入得 10</span></span><br><span class="line"><span class="comment">//0-10</span></span><br><span class="line"><span class="keyword">var</span> rnb = <span class="built_in">Math</span>.round(<span class="built_in">Math</span>.random()*<span class="number">10</span>);</span><br><span class="line"><span class="comment">//1-10</span></span><br><span class="line"><span class="keyword">var</span> rnb1 = <span class="built_in">Math</span>.ceil(<span class="built_in">Math</span>.random()*<span class="number">10</span>);</span><br><span class="line"><span class="comment">//0-9</span></span><br><span class="line"><span class="keyword">var</span> rnb2 = <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*<span class="number">10</span>);</span><br><span class="line"><span class="comment">//30-60</span></span><br><span class="line"><span class="keyword">var</span> rnb3 = <span class="built_in">Math</span>.round(<span class="built_in">Math</span>.random()*<span class="number">30</span>+<span class="number">30</span>);</span><br><span class="line"><span class="keyword">var</span> rnb4 = <span class="built_in">Math</span>.round(<span class="built_in">Math</span>.random()*<span class="number">17</span>);</span><br><span class="line">alert(rnb4);</span><br><span class="line"> </span><br><span class="line"><span class="comment">//round:round()四舍五入取整</span></span><br><span class="line"><span class="comment">//var num2 = 5.9999999;</span></span><br><span class="line"><span class="comment">//alert(Math.round(num));//6</span></span><br><span class="line"><span class="comment">//var num3 = 5.499999;</span></span><br><span class="line"><span class="comment">//alert(Math.round(num));//5</span></span><br></pre></td></tr></table></figure>
<h3 id="Array-数组"><a href="#Array-数组" class="headerlink" title="Array(数组)"></a>Array(数组)</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></pre></td><td class="code"><pre><span class="line">Array 对象</span><br><span class="line">Array 对象用于在单个的变量中存储多个值。</span><br><span class="line"></span><br><span class="line">Array 对象属性</span><br><span class="line"></span><br><span class="line">constructor 返回对创建此对象的数组函数的引用。</span><br><span class="line">length 设置或返回数组中元素的数目。</span><br><span class="line">prototype 使您有能力向对象添加属性和方法。</span><br><span class="line">Array 对象方法</span><br><span class="line"></span><br><span class="line">concat() 连接两个或更多的数组，并返回结果。</span><br><span class="line">join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。</span><br><span class="line">pop() 删除并返回数组的最后一个元素</span><br><span class="line">push() 向数组的末尾添加一个或更多元素，并返回新的长度。</span><br><span class="line">reverse() 颠倒数组中元素的顺序。</span><br><span class="line">shift() 删除并返回数组的第一个元素</span><br><span class="line">slice() 从某个已有的数组返回选定的元素</span><br><span class="line">sort() 对数组的元素进行排序</span><br><span class="line">splice() 删除元素，并向数组添加新元素。</span><br><span class="line">toSource() 返回该对象的源代码。</span><br><span class="line">toString() 把数组转换为字符串，并返回结果。</span><br><span class="line">toLocaleString() 把数组转换为本地数组，并返回结果。</span><br><span class="line">unshift() 向数组的开头添加一个或更多元素，并返回新的长度。</span><br><span class="line">valueOf() 返回数组对象的原始值</span><br></pre></td></tr></table></figure>
<p>解析</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组方法</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* join:把数组拼接为字符串 将数组里面的逗号替换为join里面的参数，然后拼接为字符串栗子 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//var str = "acbcdcecf";</span></span><br><span class="line"><span class="comment">//document.write(str + "<br />");</span></span><br><span class="line"><span class="comment">//var arr = str.split("c");//每个字符之间劈开</span></span><br><span class="line"><span class="comment">//document.write(arr + "<br />");</span></span><br><span class="line"><span class="comment">//str = arr.join("<span>p</span>");</span></span><br><span class="line"><span class="comment">//document.write(str + "<br />");</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//数组增加删除方法</span></span><br><span class="line"><span class="comment">//var arr = [1, 2 , 3, 4, 5];</span></span><br><span class="line"><span class="comment">//arr[arr.length] = arr.length + 1;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//push 在数组后面添加内容</span></span><br><span class="line"><span class="comment">//arr.push(7);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//unshift 在数组前面添加内容</span></span><br><span class="line"><span class="comment">//arr.unshift(0);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//pop 删除最后一个 返回删除的内容</span></span><br><span class="line"><span class="comment">//arr.pop()</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//把最后内容添加到前面</span></span><br><span class="line"><span class="comment">//arr.unshift(arr.pop());</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//shift删除第一个 返回删除的内容</span></span><br><span class="line"><span class="comment">//arr.shift();</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//把第一个内容添加到最后面</span></span><br><span class="line"><span class="comment">//arr.push(arr.shift());</span></span><br><span class="line"><span class="comment">//document.write(arr);</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">//数组合并方法</span></span><br><span class="line"><span class="comment">//var arr = [1,2,3,4,5];</span></span><br><span class="line"><span class="comment">//var arr2 = [6,7,8,9];</span></span><br><span class="line"><span class="comment">//var arr3 = [10,11,12];</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*concat 合并数组 在concat 里面加上要合并的数组 可以添加多个 用逗号隔开 原来数组不会有任何改变，合并的是返回值*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//var newArr = arr.concat(arr2,arr3);</span></span><br><span class="line"><span class="comment">//document.write("newArr："+newArr+"<br />");</span></span><br><span class="line"><span class="comment">//document.write("arr："+arr+"<br />");</span></span><br><span class="line"><span class="comment">//document.write("arr2："+arr2+"<br />");</span></span><br><span class="line"><span class="comment">//document.write("arr3："+arr3+"<br />");</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//截取</span></span><br><span class="line"><span class="comment">//var arr = [1,2,3,4,5,6];</span></span><br><span class="line"><span class="comment">//document.write(arr.slice(2,4));</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//倒序 原来数组会改变为倒序</span></span><br><span class="line"><span class="comment">//var arr = [1,2,3,4,5,6,7,8,9];</span></span><br><span class="line"><span class="comment">//document.write(arr.reverse());</span></span><br><span class="line"><span class="comment">//document.write(arr);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//var arr = [6,8,5,2,9,1,7,4,3];</span></span><br><span class="line"><span class="comment">//arr.sort();//默认按顺序排列</span></span><br><span class="line"><span class="comment">//arr.sort(function (a ,b ){</span></span><br><span class="line"><span class="comment">// return b-a;</span></span><br><span class="line"><span class="comment">//});//a-b 正 b-a 负</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//打乱数组顺序</span></span><br><span class="line"><span class="comment">/* arr.sort(function(){</span><br><span class="line"> return Math.random()-0.5;随机</span><br><span class="line">})</span><br><span class="line">document.write(arr);*/</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">/*splice（a，b，c） a:从哪里开始 b:往后删除多少个 c:添加内容后面可以添加多个，用逗号隔开*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//var arr = ["a","b","c","d"];</span></span><br><span class="line"><span class="comment">//删除</span></span><br><span class="line"><span class="comment">//arr.splice(1,1);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//替换</span></span><br><span class="line"><span class="comment">//arr.splice(1,1,"新的");</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//添加</span></span><br><span class="line"><span class="comment">//arr.splice(1,0,"新的");</span></span><br><span class="line"><span class="comment">//document.write(arr);</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//转换 </span></span><br><span class="line"><span class="comment">//Number():把数据类型转为数字 </span></span><br><span class="line"><span class="comment">//String():把数据类型转为字符串</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*parseInt(a,b):把数据类型转为数字 从开始找字符串里的数字，直到不是数字就会停下来（ 类似向上取整） a:是要转换的数据 b: 是要按什么进制进行转换 2进制 8进制 10进制 16进制 parseFloat：把数据类型转为浮点数（有小数点的数）*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//alert(Number("123px123"));//NaN</span></span><br><span class="line"><span class="comment">//alert(parseInt("123px123",10));//123</span></span><br></pre></td></tr></table></figure>
<p>栗子-输出随机的顺序</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr =[<span class="string">'韦*'</span>,<span class="string">'李*'</span>,<span class="string">'戚*'</span>,<span class="string">'杨**'</span>,<span class="string">'张**'</span>,<span class="string">'徐**'</span>,<span class="string">'赖**'</span>,<span class="string">'代*'</span>,<span class="string">'李**'</span>,<span class="string">'孔**'</span>,<span class="string">'李**'</span>,<span class="string">'庞**'</span>,<span class="string">'胡**'</span>,<span class="string">'肖*'</span>,<span class="string">'肖*'</span>,<span class="string">'张**'</span>,<span class="string">'唐*'</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i < <span class="number">10000</span> ; i++) {</span><br><span class="line"> arr.sort(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//对数组的元素进行排序</span></span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Math</span>.random()<span class="number">-0.5</span>;<span class="comment">//获取一个随机数</span></span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i < arr.length ; i++) {</span><br><span class="line"> <span class="built_in">document</span>.write((i+<span class="number">1</span>)+<span class="string">". "</span> +arr[i] + <span class="string">"<br />"</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>输出随机的顺序函数代码</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//随机打乱数组内容</span></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">sortFn</span>(<span class="params">arr</span>)</span>{</span><br><span class="line"> arr.sort(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="keyword">return</span> <span class="built_in">Math</span>.random()<span class="number">-0.5</span>});</span><br><span class="line"> <span class="keyword">return</span> arr;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>获取范围内的随机数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*myrandom(min,max) min到max范围的随机数*/</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myrandom</span>(<span class="params">min,max</span>)</span>{</span><br><span class="line"> <span class="keyword">var</span> rnd = <span class="built_in">Math</span>.round(<span class="built_in">Math</span>.random()*(max-min)+min);</span><br><span class="line"> <span class="keyword">return</span> rnd;</span><br><span class="line">}</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">alert(myrandom(<span class="number">1</span>,<span class="number">2</span>));<span class="comment">//1-2的随机数,包括1，2</span></span><br></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/08/23/dayone/" itemprop="url">
Untitled
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2016-08-23T11:58:20+08:00" content="2016-08-23">
2016-08-23
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="H5基础-与-CSS3"><a href="#H5基础-与-CSS3" class="headerlink" title="H5基础 与 CSS3"></a>H5基础 与 CSS3</h2><p>H5基础</p>
<p>HTML5 是下一代的 HTML。</p>
<h3 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h3><p>2.CSS3样式属性</p>
<p>圆角</p>
<p>语法</p>
<p>例子</p>
<figure class="highlight css"><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"><span class="comment">/*border-radius：[ length | percentage ]{1,4} ] / [ length | percentage ]{1,4} ] 默认值：0*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.a</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="comment">/*border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;*/</span></span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">100px</span>/<span class="number">50px</span>;<span class="comment">/*以上简写*/</span></span><br><span class="line"> <span class="attribute">background</span>:<span class="number">#8f0</span>;</span><br><span class="line"> }<span class="comment">/*——椭圆*/</span></span><br></pre></td></tr></table></figure>
<p>简写</p>
<figure class="highlight css"><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"><span class="selector-class">.a</span>{</span><br><span class="line"> <span class="comment">/*border-top-left-radius: 100px 30px;</span><br><span class="line"> border-top-right-radius: 60px 50px ;</span><br><span class="line"> border-bottom-left-radius: 80px 20px;</span><br><span class="line"> border-bottom-right-radius: 100px 50px ;*/</span></span><br><span class="line"> <span class="attribute">border-radius</span>:<span class="number">100px</span> <span class="number">60px</span> <span class="number">100px</span> <span class="number">80px</span>/<span class="number">30px</span> <span class="number">50px</span> <span class="number">50px</span> <span class="number">20px</span>;<span class="comment">/*以上简写*/</span></span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.b</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">50px</span> solid black;</span><br><span class="line"> <span class="attribute">border-color</span>: <span class="number">#0f8</span> transparent <span class="number">#8f0</span> <span class="number">#08f</span>;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50px</span>;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>图像边框</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--border-image-source : none | url(图像来源路径)默认值：none </span><br><span class="line">border-image-slice : [ number | percentage ]{1,4} && fill 默认值：100% </span><br><span class="line">border-image-width : [ length | percentage | number | auto ]{1,4} 默认值：1 该属性用于指定边框宽度。</span><br><span class="line">border-image-outset : [ length | number ]{1,4} 默认值：0 对边框背景图的扩展</span><br><span class="line">border-image-repeat : [ stretch | repeat | round ]{1,2} 默认值：stretch 指定边框背景图的填充方式</span><br><span class="line"></span><br><span class="line">涉及到的取值</span><br><span class="line"></span><br><span class="line">stretch： 指定用拉伸方式来填充边框背景图。</span><br><span class="line">repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。</span><br><span class="line">round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。</span><br><span class="line">border-image:url() number% stretch;--></span></span><br></pre></td></tr></table></figure>
<p>阴影</p>
<p>文本阴影</p>
<p>语法</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*text-shadow：none | shadow [ , shadow ]*shadow = length{2,3} && color ]默认值：none */</span></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></pre></td><td class="code"><pre><span class="line">none： 无阴影</span><br><span class="line">第1个长度值：阴影水平偏移值。可为负值</span><br><span class="line">第2个长度值：阴影垂直偏移值。可为负值 </span><br><span class="line">第3个长度值：可选，阴影模糊值。不允许负值</span><br><span class="line">color： 设置对象的阴影的颜色。</span><br></pre></td></tr></table></figure>
<p>盒阴影</p>
<p>语法</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*box-shadow：none | shadow [ , shadow ]*shadow = length{2,4} && color 默认值：none inset 内阴影*/</span></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">第4个长度值：可选，阴影外延值。不允许负值</span><br></pre></td></tr></table></figure>
<p>背景尺寸</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span><br><span class="line">backgroun-size</span><br><span class="line">length： 长度值指定</span><br><span class="line">percentage： 百分比指定</span><br><span class="line">auto： 真实大小</span><br><span class="line">cover：等比缩放到完全覆盖容器，背景图像有可能超出容器 </span><br><span class="line">contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内</span><br><span class="line">*/</span></span><br></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/08/23/dayday/" itemprop="url">
Untitled
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2016-08-23T11:30:33+08:00" content="2016-08-23">
2016-08-23
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="H5基础-与-CSS3"><a href="#H5基础-与-CSS3" class="headerlink" title="H5基础 与 CSS3"></a>H5基础 与 CSS3</h2><p>H5基础</p>
<p>HTML5 是下一代的 HTML。</p>
<h3 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h3><p>1.语义化更好</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">新增标签</span><br><span class="line"></span><br><span class="line">article定义文章</span><br><span class="line">aside定义文章的侧边栏</span><br><span class="line">figure一组媒体对象以及文字</span><br><span class="line">figcaption定义 figure 的标题</span><br><span class="line">footer定义页脚</span><br><span class="line">header定义页眉</span><br><span class="line">hgroup定义对网页标题的组合</span><br><span class="line">nav定义导航</span><br><span class="line">section定义文档中的区段</span><br><span class="line">time定义日期和时间</span><br><span class="line">mark定义需要突出显示或高亮显示的文本</span><br><span class="line">progress显示js中耗费的函数的进程</span><br><span class="line">details表示用户要求得到并可以得到的详细信息</span><br></pre></td></tr></table></figure>
<p>3.表单功能增强</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></pre></td><td class="code"><pre><span class="line">新增的input元素的类型</span><br><span class="line"></span><br><span class="line">url:提交表单时检测input的value是否是一个url格式</span><br><span class="line">email:一个电子邮件地址或电子邮件地址列表</span><br><span class="line">date:年-月-日格式的控件</span><br><span class="line">time:时:分格式的控件</span><br><span class="line">datetime-local:同上，但没时区</span><br><span class="line">month:年-月格式的控件</span><br><span class="line">week:年-周数格式的控件</span><br><span class="line">number:数字输入框</span><br><span class="line">color:颜色选择框</span><br><span class="line">range:选择区域</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">input新属性</span><br><span class="line"></span><br><span class="line">placeholder:占位符，当输入框为空时显示的文字</span><br><span class="line">required:该input是否为必填项</span><br><span class="line">list:指定一个datalist，作为下拉提示单</span><br><span class="line">pattern:指定一个正则表达式，用于检查输入是否符合正则</span><br><span class="line">min/max:input的number能输入的最大/最小</span><br><span class="line">step:针对input的number类型，每次递增step的值</span><br></pre></td></tr></table></figure>
<p>5.响应式</p>
<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">CSS3——media query（媒体查询）</span><br><span class="line">借助Javascript 判断屏幕的宽度和设备来进行调整</span><br><span class="line">第三方的开源框架：bootstrap amazeui</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></pre></td><td class="code"><pre><span class="line">仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组css媒体查询突变到另一组，两者间没有任何平滑渐变。</span><br><span class="line">将固定像素布局转换为灵活的百分比布局。</span><br><span class="line">百分比计算公式：目标元素width/上下文元素width=百分比width</span><br><span class="line"></span><br><span class="line">用em（rem）替换px（em用于字体，rem用于所有）</span><br><span class="line">弹性图片，需要设置阀值</span><br><span class="line">为不同屏幕尺寸提供不同图片</span><br></pre></td></tr></table></figure>
<p>viewport 视口（改变分辨率）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"</span>></span></span><br><span class="line"><span class="comment"><!--</span><br><span class="line">device-width——设备的宽度</span><br><span class="line">initial-scale——初始大小</span><br><span class="line">maximum-scale——最大缩放</span><br><span class="line">user-scalable——用户操作 0为不能操作</span><br><span class="line">--></span></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></pre></td><td class="code"><pre><span class="line">screen用于电脑屏幕，平板电脑，智能手机等。</span><br><span class="line">max-width定义输出设备中的页面最大可见区域宽度。</span><br><span class="line">max-height定义输出设备中的页面最大可见区域高度。</span><br><span class="line">min-width定义输出设备中的页面最小可见区域宽度。</span><br></pre></td></tr></table></figure>
<p>栗子</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">media</span> screen and (min-width: <span class="number">320px</span>) and (max-width: <span class="number">640px</span>){</span><br><span class="line"> <span class="comment">/*屏幕最小320 最大640时所执行的样式*/</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>核心的属性</p>
<p>Orientation-设备方向</p>
<figure class="highlight css"><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">@<span class="keyword">media</span> screen and (orientation:portrait){}<span class="comment">/*-竖屏-*/</span></span><br><span class="line">@<span class="keyword">media</span> screen and (orientation:landscape){}<span class="comment">/*-横屏-*/</span></span><br></pre></td></tr></table></figure>
<p>CSS3</p>
<p>1.更多选择器类型</p>
<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">~ ： E~F{ } 匹配任何在E元素之后的同级F元素(从E元素往后找同级兄弟F元素)ie9以上</span><br><span class="line">+ ：E+F{ } 匹配在E元素之后第一个的同级F元素ie9以上</span><br><span class="line">> : E>F{ } 匹配任何在E元素之后子级为F的元素ie8以上</span><br></pre></td></tr></table></figure>
<p>属性选择器(优先级比类选择器高，比id选择器低)ie8以上</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">E[att^=“ val”] :属性att的值以“ val”开头元素</span><br><span class="line">E[att$=“ val”] :属性att的值以“ val”结尾元素</span><br><span class="line">E[att*=“ val”] :属性att的值任何位置包含“ val”元素</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><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></pre></td><td class="code"><pre><span class="line">E: root 匹配E元素的根元素（html）</span><br><span class="line"></span><br><span class="line"> E：nth-child（n）匹配E元素的父级下排第n个E元素</span><br><span class="line"> E: nth-last-child（n）匹配E元素的父级下排倒数第n个E元素</span><br><span class="line"> E: last-child 匹配E元素的父级下排倒数第1个E元素</span><br><span class="line"></span><br><span class="line"> E：nth-of-type（n）匹配E元素的父级下第n个E元素</span><br><span class="line"> E：nth-last-of-type（n）匹配E元素的父级下第n个E元素</span><br><span class="line"> E：first-of-type 匹配E元素的父级下第n个E元素</span><br><span class="line"> E：last-of-type 匹配E元素的父级排第n个E元素</span><br><span class="line"></span><br><span class="line">E：only-child 匹配E元素的父级下唯一的子级E元素</span><br><span class="line">E：only-of-type 匹配E元素的父级下唯一E元素类型的子级E元素</span><br><span class="line">E：empty 匹配空的E元素</span><br><span class="line"></span><br><span class="line">E：not（s）反选，匹配不为s的E元素</span><br><span class="line">E:target 选择当前活动的 E 元素（即被a锚点选中时）</span><br><span class="line">input:enabled 选择每个启用的 <input> 元素</span><br><span class="line">input:disabled 选择每个禁用的 <input> 元素 </span><br><span class="line">input:checked 选择每个被选中的 <input> 元素</span><br><span class="line">E::selection 选择被用户选取的元素部分的字体样式、背景</span><br></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/08/23/fenxi/" itemprop="url">
Untitled
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2016-08-23T11:02:24+08:00" content="2016-08-23">
2016-08-23
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="JS的切换案例分析"><a href="#JS的切换案例分析" class="headerlink" title="JS的切换案例分析"></a>JS的切换案例分析</h2><p>js什么的用文字说都太丧心病狂了，所以能用代码解决的事就不要揪着文字不放了！！！以下所有分析都在代码里，别说你看不见!!!</p>
<p>案例1 按钮点击切换div</p>
<p>代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: cornflowerblue;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.show</span>{</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.select</span>{</span><br><span class="line"> <span class="attribute">background</span>: darkorange;</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span><br><span class="line"> <span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//根据TagName获取四个按钮</span></span><br><span class="line"> <span class="keyword">var</span> input = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"input"</span>);</span><br><span class="line"> <span class="comment">//根据TagName获取四个div</span></span><br><span class="line"> <span class="keyword">var</span> div = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"div"</span>);</span><br><span class="line"> <span class="comment">//最简单的写法</span></span><br><span class="line"> <span class="comment">//第1个按钮</span></span><br><span class="line"> input[<span class="number">0</span>].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//清空样式</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<input.length;i++) {</span><br><span class="line"> input[i].className = <span class="string">""</span>;</span><br><span class="line"> div[i].className =<span class="string">""</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.className = <span class="string">"select"</span>;</span><br><span class="line"> div[<span class="number">0</span>].className = <span class="string">"show"</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//第2个按钮</span></span><br><span class="line"> input[<span class="number">1</span>].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//清空样式</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<input.length;i++) {</span><br><span class="line"> input[i].className = <span class="string">""</span>;</span><br><span class="line"> div[i].className =<span class="string">""</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.className = <span class="string">"select"</span>;</span><br><span class="line"> div[<span class="number">1</span>].className = <span class="string">"show"</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//第3个按钮</span></span><br><span class="line"> input[<span class="number">2</span>].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//清空样式</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<input.length;i++) {</span><br><span class="line"> input[i].className = <span class="string">""</span>;</span><br><span class="line"> div[i].className =<span class="string">""</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.className = <span class="string">"select"</span>;</span><br><span class="line"> div[<span class="number">2</span>].className = <span class="string">"show"</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//第4个按钮</span></span><br><span class="line"> input[<span class="number">3</span>].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//清空样式</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<input.length;i++) {</span><br><span class="line"> input[i].className = <span class="string">""</span>;</span><br><span class="line"> div[i].className =<span class="string">""</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.className = <span class="string">"select"</span>;</span><br><span class="line"> div[<span class="number">3</span>].className = <span class="string">"show"</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//以上代码不一样的地方只有[]里的数字，所以可以采用for循环来简洁代码</span></span><br><span class="line"> <span class="comment">//写法1</span></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i < input.length; i++){</span><br><span class="line"> <span class="comment">//给input标志一个数字，用于告诉div，input是第几个</span></span><br><span class="line"> input[i].index = i;</span><br><span class="line"> input[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//清空样式</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<input.length;i++) {</span><br><span class="line"> input[i].className = <span class="string">""</span>;</span><br><span class="line"> div[i].className =<span class="string">""</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">this</span>.className = <span class="string">"select"</span>;</span><br><span class="line"> div[<span class="keyword">this</span>.index].className = <span class="string">"show"</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//写法2</span></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i < input.length; i++){</span><br><span class="line"> input[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i<input.length;i++) {</span><br><span class="line"> <span class="keyword">if</span> (<span class="keyword">this</span> == input[i]) {<span class="comment">//判断this是哪个input</span></span><br><span class="line"> input[i].className = <span class="string">"select"</span>;</span><br><span class="line"> div[i].className = <span class="string">"show"</span>;</span><br><span class="line"> } <span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//清空样式</span></span><br><span class="line"> input[i].className = <span class="string">""</span>;</span><br><span class="line"> div[i].className =<span class="string">""</span>;</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 class="comment">//写法3 减少计算器的运算</span></span><br><span class="line"> <span class="keyword">var</span> before = <span class="number">0</span>;<span class="comment">//用于记录当前选中的index值，并在下次点击事件变成上一个，然后清除它的样式，达到切换效果</span></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>; i < input.length; i++){</span><br><span class="line"> <span class="comment">//给input标志一个数字，用于告诉div，input是第几个</span></span><br><span class="line"> input[i].index = i;</span><br><span class="line"> input[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> input[before].className = <span class="string">""</span>;<span class="comment">//清除上一个选中的index值</span></span><br><span class="line"> div[before].className = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">this</span>.className = <span class="string">"select"</span>;</span><br><span class="line"> div[<span class="keyword">this</span>.index].className = <span class="string">"show"</span>;</span><br><span class="line"> before = <span class="keyword">this</span>.index;<span class="comment">//记录当前选中的index值</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">class</span>=<span class="string">"select"</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮1"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮2"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮3"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮4"</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"show"</span>></span>1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>3<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>4<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>案例2 图片切换</p>
<p>代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">html</span>,<span class="selector-tag">body</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.warp</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.img</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#show</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">400%</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">transition</span>: <span class="number">1s</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#show</span> <span class="selector-tag">img</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">12.5%</span>;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.warp</span> <span class="selector-id">#next</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">-webkit-box-sizing</span>: border-box;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">8px</span> solid cornflowerblue;</span><br><span class="line"> <span class="attribute">border-color</span>: transparent transparent transparent cornflowerblue; </span><br><span class="line"> <span class="attribute">position</span>: absolute; </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">5%</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.warp</span> <span class="selector-id">#before</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">0</span>;</span><br><span class="line"> <span class="attribute">-webkit-box-sizing</span>: border-box;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">8px</span> solid cornflowerblue;</span><br><span class="line"> <span class="attribute">border-color</span>: transparent cornflowerblue transparent transparent; </span><br><span class="line"> <span class="attribute">position</span>: absolute; </span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">15%</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span><br><span class="line"> <span class="built_in">window</span>.onload =<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//根据ID获取上一张的按钮</span></span><br><span class="line"> <span class="keyword">var</span> before = <span class="built_in">document</span>.getElementById(<span class="string">'before'</span>);</span><br><span class="line"> <span class="comment">//根据ID获取下一张的按钮</span></span><br><span class="line"> <span class="keyword">var</span> next = <span class="built_in">document</span>.getElementById(<span class="string">'next'</span>);</span><br><span class="line"> <span class="comment">//根据ID获取图片的父级div</span></span><br><span class="line"> <span class="keyword">var</span> s = <span class="built_in">document</span>.getElementById(<span class="string">'show'</span>);</span><br><span class="line"> <span class="comment">//根据TagName获取图片的集合</span></span><br><span class="line"> <span class="keyword">var</span> img = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'img'</span>);</span><br><span class="line"> <span class="comment">//定义一个节点，确定图片当前的位置</span></span><br><span class="line"> <span class="keyword">var</span> index = <span class="number">1</span>;</span><br><span class="line"> <span class="comment">//下一张按钮的点击事件</span></span><br><span class="line"> next.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(index < img.length){<span class="comment">//判断图片是否是最后一张</span></span><br><span class="line"> <span class="comment">//图片不是最后一张时，执行</span></span><br><span class="line"> <span class="comment">//定义num 计算left的数值，每张宽度是wrap的100%</span></span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">-1</span> * index;</span><br><span class="line"> <span class="comment">//修改图片父级div的left值达到移动的效果（注：num算出来是一个数值不是百分比，所以要把num修改为百分比）</span></span><br><span class="line"> s.style.left = num*<span class="number">100</span> +<span class="string">"%"</span>;</span><br><span class="line"> <span class="comment">//移动结束，记录当前图片位置</span></span><br><span class="line"> index ++;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//图片是最后一张时，执行</span></span><br><span class="line"> <span class="comment">//让图片回到第一张</span></span><br><span class="line"> s.style.left = <span class="string">'0'</span>;</span><br><span class="line"> <span class="comment">//初始当前图片位置</span></span><br><span class="line"> index = <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//上一张按钮的点击事件</span></span><br><span class="line"> before.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="keyword">if</span>(index != <span class="number">0</span>){<span class="comment">//判断图片是否是第一张</span></span><br><span class="line"> <span class="comment">//图片不是第一张时，执行</span></span><br><span class="line"> <span class="comment">//定义num 计算left的数值，每张宽度是wrap的100%</span></span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">-1</span> * index;</span><br><span class="line"> <span class="comment">//修改图片父级div的left值达到移动的效果（注：num算出来是一个数值不是百分比，所以要把num修改为百分比）</span></span><br><span class="line"> s.style.left = num*<span class="number">100</span> +<span class="string">"%"</span>;</span><br><span class="line"> <span class="comment">//移动结束，记录当前图片位置（注：位置需要的是上一张，所以是-1）</span></span><br><span class="line"> index --;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//图片是第一张时，执行</span></span><br><span class="line"> <span class="comment">//让图片回到最后一张</span></span><br><span class="line"> s.style.left = <span class="string">'-300%'</span>;</span><br><span class="line"> <span class="comment">//记录最后一张位置</span></span><br><span class="line"> index = img.length;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//每张图片的点击事件</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < img.length;i++) {<span class="comment">//遍历每张图片</span></span><br><span class="line"> img[i].onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{<span class="comment">//设置每张图片的点击事件</span></span><br><span class="line"> <span class="keyword">if</span>(index < img.length){<span class="comment">//判断图片是否是最后一张</span></span><br><span class="line"> <span class="comment">//图片不是最后一张时，执行</span></span><br><span class="line"> <span class="comment">//定义num 计算left的数值，每张宽度是wrap的100%</span></span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">-1</span> * index;</span><br><span class="line"> <span class="comment">//修改图片父级div的left值达到移动的效果（注：num算出来是一个数值不是百分比，所以要把num修改为百分比）</span></span><br><span class="line"> s.style.left = num*<span class="number">100</span> +<span class="string">"%"</span>;</span><br><span class="line"> <span class="comment">//移动结束，记录当前图片位置</span></span><br><span class="line"> index ++;</span><br><span class="line"> }<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">//图片是最后一张时，执行</span></span><br><span class="line"> <span class="comment">//让图片回到第一张</span></span><br><span class="line"> s.style.left = <span class="string">'0'</span>;</span><br><span class="line"> <span class="comment">//初始当前图片位置</span></span><br><span class="line"> index = <span class="number">1</span>;</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><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"warp"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"img"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"show"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"image/bytedanceHD.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"image/huawei_redpoint.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"image/toutiaohaoHD.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"image/UCexplorer.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span> /></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"before"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"next"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>案例3 鼠标经过时切换</p>
<p>代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">body</span>{</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.clear</span><span class="selector-pseudo">:after</span>{</span><br><span class="line"> <span class="attribute">content</span>: <span class="string">''</span>;</span><br><span class="line"> <span class="attribute">display</span>: block;</span><br><span class="line"> <span class="attribute">clear</span>: both;</span><br><span class="line"> <span class="attribute">zoom</span>: <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.fl</span>{</span><br><span class="line"> <span class="attribute">float</span>: left;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.fr</span>{</span><br><span class="line"> <span class="attribute">float</span>: right;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.wrap</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">1px</span> solid mediumaquamarine;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">3px</span> aquamarine;</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#left</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#left</span> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">24.8%</span>;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid cadetblue;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(0,255,255,0.05);</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#left</span> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child(4)</span>{</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#scroll</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">url</span>(img/arr.png);</span><br><span class="line"> <span class="attribute">background-size</span>: <span class="number">100%</span> <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0px</span>;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">131px</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line"> <span class="attribute">transition</span>: <span class="number">0.6s</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#right</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">249px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">border-left</span>: <span class="number">1px</span> solid <span class="number">#eee</span>;</span><br><span class="line"> <span class="attribute">z-index</span>: <span class="number">3</span>;</span><br><span class="line"> <span class="attribute">background</span>: white;</span><br><span class="line"> <span class="attribute">box-shadow</span>: -<span class="number">1px</span> <span class="number">0px</span> <span class="number">3px</span> <span class="number">#ccc</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#right</span> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">display</span>: none;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#right</span> <span class="selector-tag">div</span> <span class="selector-tag">img</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-id">#left</span> <span class="selector-class">.select</span>{</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">rgba</span>(0,251,255,0.2);</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>></span><span class="javascript"></span><br><span class="line"> <span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span><br><span class="line"> <span class="comment">//1.获取左边四个邮箱类型</span></span><br><span class="line"> <span class="comment">//2.获取三角形</span></span><br><span class="line"> <span class="comment">//3.获取右边四块邮箱内容</span></span><br><span class="line"> <span class="comment">//4.设置四个邮箱类型的鼠标经过事件</span></span><br><span class="line"> <span class="comment">//5.经过时改变三角形位置</span></span><br><span class="line"> <span class="comment">//6.显示右边对应的邮箱内容</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">var</span> left = <span class="built_in">document</span>.getElementById(<span class="string">'left'</span>);</span><br><span class="line"> <span class="keyword">var</span> scroll = <span class="built_in">document</span>.getElementById(<span class="string">'scroll'</span>);<span class="comment">//三角形</span></span><br><span class="line"> <span class="keyword">var</span> right = <span class="built_in">document</span>.getElementById(<span class="string">'right'</span>);</span><br><span class="line"> <span class="keyword">var</span> div = left.getElementsByTagName(<span class="string">'div'</span>);<span class="comment">//左边四个邮箱类型</span></span><br><span class="line"> <span class="keyword">var</span> div2 = right.getElementsByTagName(<span class="string">'div'</span>);<span class="comment">//右边四块邮箱内容</span></span><br><span class="line"> <span class="comment">//offsetHeight 获取标签的高度 offsetWidth 获取标签的宽度</span></span><br><span class="line"> <span class="comment">//左边单个邮箱类型的高度减三角形的高度，除以2 获得左边单个邮箱类型的垂直中间位置</span></span><br><span class="line"> <span class="keyword">var</span> _middle = (div[<span class="number">0</span>].offsetHeight -scroll.offsetHeight)/<span class="number">2</span>;</span><br><span class="line"> <span class="comment">//设置三角形的初始位置为左边单个邮箱类型的垂直中间位置</span></span><br><span class="line"> scroll.style.top = _middle+<span class="string">"px"</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//遍历设置左边的所有项的鼠标经过事件</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i < div.length ; i++) {</span><br><span class="line"> div[i].index = i ;<span class="comment">//定义左边单个邮箱类型的节点，告诉它，它自己的位置，以控制右边对应的邮箱内容显示</span></span><br><span class="line"> div[i].onmouseenter = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{<span class="comment">//鼠标经过事件</span></span><br><span class="line"> <span class="keyword">var</span> sum = _middle + (<span class="number">100</span>*<span class="keyword">this</span>.index);<span class="comment">//计算该邮箱类型的垂直中间位置</span></span><br><span class="line"> scroll.style.top = sum+<span class="string">'px'</span>;<span class="comment">//改变三角形位置</span></span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> j=<span class="number">0</span>; j < div.length ; j++) {<span class="comment">//清除所有邮箱类型以及右边对应的邮箱内容的样式</span></span><br><span class="line"> div[j].className = <span class="string">""</span>;</span><br><span class="line"> div2[j].style.display = <span class="string">"none"</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="comment">//设置当前选中邮箱类型以及右边对应的邮箱内容的样式</span></span><br><span class="line"> <span class="keyword">this</span>.className = <span class="string">'select'</span>;</span><br><span class="line"> div2[<span class="keyword">this</span>.index].style.display = <span class="string">"block"</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrap clear"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"left"</span> <span class="attr">class</span>=<span class="string">"fl"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"select"</span>></span>163<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>126<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>qq<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>google<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"scroll"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">"right"</span> <span class="attr">class</span>=<span class="string">"fr"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"display: block;"</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"../image/toutiaohaoHD.jpg"</span>/></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> ></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"../image/huawei_redpoint.jpg"</span>/></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> ></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"../image/UCexplorer.jpg"</span>/></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> ></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"../image/bytedanceHD.jpg"</span>/></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></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></pre></td><td class="code"><pre><span class="line">function</span><br><span class="line">function:函数，一个方法，需要一个对象去调用</span><br><span class="line">this：函数里的一个对象</span><br><span class="line">给函数名加上()可以执行</span><br><span class="line">默认调用的函数是window</span><br><span class="line">谁调用函数,this就是谁</span><br></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2016/08/23/sixday/" itemprop="url">
Untitled
</a>
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time itemprop="dateCreated" datetime="2016-08-23T09:08:16+08:00" content="2016-08-23">
2016-08-23
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="H5基础-与-CSS3"><a href="#H5基础-与-CSS3" class="headerlink" title="H5基础 与 CSS3"></a>H5基础 与 CSS3</h2><p>H5基础</p>
<p>HTML5 是下一代的 HTML。</p>
<h3 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h3><p>3.CSS3进阶属性<br>CSS3渐变（linear-gradient（线性渐变）、radial-gradient（径向渐变））</p>
<p>线性渐变</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span>{</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(30deg,#f80 0,#0f8 40%,#8f0 70%,#0ff);</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.b</span>{</span><br><span class="line"> <span class="comment">/*——rgba()IE9以上兼容,设置颜色和透明度*/</span></span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(30deg,rgba(255,0,0,0),<span class="built_in">rgba</span>(255,0,0,1));</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>径向渐变</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.a</span>{</span><br><span class="line"> <span class="comment">/*33%为中心点位置50px为扩散范围*/</span></span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">-webkit-radial-gradient</span>(33% 33%,50px 50px,#f80 0,#0f8 30%,#8f0 60%,#0ff);</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>练习-使用渐变画出一个球体和渐变的圆角</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">float</span>: left;</span><br><span class="line"> <span class="attribute">margin-right</span>: <span class="number">30px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child(1)</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">-webkit-radial-gradient</span>(30% 30%,100% 100%,#fff,#666,#000);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">3px</span> <span class="number">3px</span> <span class="number">10px</span> <span class="number">#666</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child(2)</span>{</span><br><span class="line"> <span class="attribute">margin-top</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(#000 0,#fff 30%,#000);</span><br><span class="line"> <span class="attribute">border-radius</span>: <span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">box-shadow</span>: <span class="number">3px</span> <span class="number">3px</span> <span class="number">10px</span> <span class="number">#666</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>蒙版</p>
<p>这里的蒙版与Ps的效果相反，不熟悉的可以先去玩Ps的，不过最后记得把思路转过来！！以下栗子接好</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"><span class="attribute">-webkit-mask-image</span>: <span class="built_in">url</span>(mark01.png);</span><br><span class="line"><span class="attribute">-webkit-mask-repeat</span>: no-repeat;</span><br><span class="line"><span class="attribute">-webkit-mask-position</span>: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line"><span class="attribute">-webkit-mask-clip</span>: content;</span><br><span class="line"><span class="attribute">-webkit-mask-origin</span>: padding;</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><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">蒙版图片：-webkit-mask-image: url()/gradient）;</span><br><span class="line">蒙版重复：-webkit-mask-repeat: no-repeat repeat-x repeat-y;</span><br><span class="line">蒙版定位：-webkit-mask-position</span><br><span class="line">蒙版-webkit-mask-clip: content border padding;</span><br><span class="line">-webkit-mask-origin: content border padding;</span><br></pre></td></tr></table></figure>
<p>CSS3倒影（reflect）</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.a</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">450px</span>;</span><br><span class="line"> <span class="attribute">-webkit-box-reflect</span>:right <span class="number">10px</span> <span class="built_in">linear-gradient</span>(to right,transparent,black);</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>CSS3过渡（transition)</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.transition</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">float</span>: none;</span><br><span class="line"> <span class="attribute">clear</span>: both;</span><br><span class="line"> <span class="comment">/*-webkit-transition: width 1s,height 1s 1s , background 1s 2s;</span><br><span class="line"> transition: width 1s,height 1s 1s , background 1s 2s;*/</span></span><br><span class="line"> <span class="attribute">-webkit-transition-delay</span>: <span class="number">1s</span>;</span><br><span class="line"> <span class="attribute">-webkit-transition-timing-function</span>: <span class="built_in">cubic-bezier</span>(.6,-0.33,.1,1.58);</span><br><span class="line"> <span class="attribute">-webkit-transition-duration</span>: <span class="number">3s</span>;</span><br><span class="line"> }</span><br><span class="line"><span class="selector-class">.transition</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line"> <span class="attribute">background</span>: blue;</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"><span class="comment">/*透明字体1： 利用背景裁剪，在类里面写文字，文字颜色设为透明*/</span></span><br><span class="line"><span class="selector-class">.bg_transition</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">color</span>: transparent;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(90deg,#f80,#f08,#8f0,#8f0,#08f,#0f8);</span><br><span class="line"> <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">-webkit-background-clip</span>: text;</span><br><span class="line"> <span class="attribute">transition</span>: background-position <span class="number">5s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.bg_transition</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">background-position</span>: <span class="number">1200px</span> <span class="number">200px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/*透明字体2 ： 利用蒙版*/</span></span><br><span class="line"><span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(50deg,red,blue,orange,pink,yellow,green,gray);</span><br><span class="line"> <span class="attribute">-webkit-mask-image</span>:<span class="built_in">url</span>(img/14.png);<span class="comment">/*文字图片，文字部分要有颜色，文字以外部分为透明*/</span></span><br><span class="line"> <span class="attribute">transition</span>: <span class="number">1s</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">background-position</span>: -<span class="number">100px</span> <span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>CSS3 3-2D-3D变形（transform）</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></pre></td><td class="code"><pre><span class="line">transform：scale() ；缩放X Y</span><br><span class="line">transform：translate() ；位移X Y</span><br><span class="line">transform：rotate() ；旋转 X Y</span><br><span class="line">transform：skew() ；倾斜X Y</span><br><span class="line">transform-origin：；设置中心点</span><br><span class="line">-webkit-perspective:500; 景深</span><br><span class="line">-webkit-transform-style: preserve-3d; 转为3D</span><br></pre></td></tr></table></figure>
<p>栗子</p>
<p>scale</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">250px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">250px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">5px</span> solid black;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">50px</span> auto; </span><br><span class="line"> <span class="attribute">overflow</span>: hidden; </span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scaleX</span>(2) <span class="built_in">scaleY</span>(1.2);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">img</span>{</span><br><span class="line"> <span class="attribute">transition</span>: <span class="number">0.5s</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span>{</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(1.2);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">p</span>{<span class="attribute">background</span>: red;}</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"img/1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>我是P<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>translate</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">100px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">p</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">margin</span>: auto;</span><br><span class="line"> <span class="comment">/*translateX translateY translateZ*/</span></span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate</span>(100px,100px);</span><br><span class="line"> <span class="attribute">background</span>: blue;</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span><span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span>></span>我是SPAN<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>rotate</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">body</span>{</span><br><span class="line"> <span class="attribute">padding-top</span>: <span class="number">100px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">margin-left</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d1</span>{</span><br><span class="line"> <span class="attribute">transition</span>:<span class="number">1s</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(0deg) <span class="built_in">translate</span>(0px);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d1</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotate</span>(50deg) <span class="built_in">translate</span>(300px);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d2</span>{</span><br><span class="line"> <span class="attribute">transition</span>: <span class="number">1s</span>;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translate</span>(0px) <span class="built_in">rotate</span>(0deg);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d2</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">transform</span>:<span class="built_in">translate</span>(300px) <span class="built_in">rotate</span>(50deg);</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d1"</span>></span>1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d2"</span>></span>2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>skew</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">skewX</span>(0deg);</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>3d</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">body</span>{</span><br><span class="line"> <span class="comment">/*视角：距离观看的内容1000px*/</span></span><br><span class="line"> <span class="attribute">-webkit-perspective</span>:<span class="number">1000</span>;</span><br><span class="line"> <span class="comment">/*转换为3D模式*/</span></span><br><span class="line"> <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(0deg) <span class="built_in">translateZ</span>(101px);<span class="comment">/*修改数值可以看到3d的旋转效果*/</span></span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>练习-做一个立方体</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">html</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">body</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> <span class="attribute">background</span>: black;</span><br><span class="line"> <span class="attribute">-webkit-perspective</span>:<span class="number">1000</span>;</span><br><span class="line"> <span class="attribute">-webkit-perspective-origin</span>:<span class="number">50%</span> <span class="number">125px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.wrap</span>{ </span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">5px</span> solid black;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">50px</span> auto;</span><br><span class="line"> <span class="attribute">transform-style</span>: preserve-<span class="number">3</span>d;</span><br><span class="line"> <span class="attribute">transition</span>: <span class="number">3s</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.wrap</span><span class="selector-pseudo">:hover</span>{</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(360deg) <span class="built_in">rotateX</span>(360deg);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.wrap</span> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> <span class="attribute">line-height</span>: <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">color</span>: white;</span><br><span class="line"> <span class="attribute">opacity</span>: <span class="number">0.8</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="selector-class">.d1</span>{</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(90deg) <span class="built_in">translateZ</span>(100px);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d2</span>{</span><br><span class="line"> <span class="attribute">background</span>: yellow;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateX</span>(90deg) <span class="built_in">translateZ</span>(-100px);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d3</span>{</span><br><span class="line"> <span class="attribute">background</span>: blue;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(90deg) <span class="built_in">translateZ</span>(-100px);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d4</span>{</span><br><span class="line"> <span class="attribute">background</span>: green;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(90deg) <span class="built_in">translateZ</span>(100px);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d5</span>{</span><br><span class="line"> <span class="attribute">background</span>: orange;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(-100px);</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.d6</span>{</span><br><span class="line"> <span class="attribute">background</span>: pink;</span><br><span class="line"> <span class="attribute">transform</span>: <span class="built_in">translateZ</span>(100px);</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrap"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d1"</span>></span>1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d2"</span>></span>2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d3"</span>></span>3<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d4"</span>></span>4<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d5"</span>></span>5<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"d6"</span>></span>6<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></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></pre></td><td class="code"><pre><span class="line">贝塞尔曲线：cubic-bezier.com/#.17,.67,.83,.67</span><br><span class="line"></span><br><span class="line">transition：property（属性） duration（执行时间） timing-function（过渡曲线） delay（延时）;</span><br><span class="line"></span><br><span class="line">timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);</span><br><span class="line"></span><br><span class="line">inear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</span><br><span class="line">ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</span><br><span class="line">ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</span><br><span class="line">ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</span><br><span class="line">ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</span><br><span class="line">cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</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></pre></td><td class="code"><pre><span class="line">浏览器内核（标准样式不用加内核前缀）</span><br><span class="line">-webkit- 谷歌和苹果</span><br><span class="line">-moz- 火狐</span><br><span class="line">-o- 欧朋</span><br><span class="line">-ms- IE</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><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">animation：property（属性） duration（执行时间） timing-function（过渡曲线） delay（延时） iteration-count(循环次数) direction（翻转动画轨迹） play-state（动画暂停） fill-mode（动画前后位置） steps(number)(分成number帧)</span><br><span class="line"></span><br><span class="line">关键帧：</span><br><span class="line">@-webkit-Keyframes ‘name’{</span><br><span class="line"> from{属性：value；}</span><br><span class="line"> percentage{属性：value；}</span><br><span class="line"> to{属性：value；}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">关键帧语法</span><br><span class="line">@KEYFRAMES写法</span><br><span class="line">@keyframes IDENT {</span><br><span class="line">from { Properties:Properties value; }</span><br><span class="line">Percentage { Properties:Properties value; }</span><br><span class="line">to { Properties:Properties value; }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>keyframes样例</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">@-<span class="keyword">webkit</span>-<span class="keyword">keyframes</span> <span class="string">'wobble'</span> {</span><br><span class="line">0% { <span class="attribute">margin-left</span>: <span class="number">100px</span>; <span class="attribute">background</span>: green; }</span><br><span class="line">40% { <span class="attribute">margin-left</span>: <span class="number">150px</span>; <span class="attribute">background</span>: orange; }</span><br><span class="line">60% { <span class="attribute">margin-left</span>: <span class="number">75px</span>; <span class="attribute">background</span>: blue; }</span><br><span class="line">100% { <span class="attribute">margin-left</span>: <span class="number">100px</span>; <span class="attribute">background</span>: red; }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>animation属性</p>
<figure class="highlight"><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">-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/</span><br><span class="line">-webkit-animation-duration: 10s;/*动画持续时间*/</span><br><span class="line">-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/</span><br><span class="line">ease | linear | ease-in | ease-out | ease-in-out | cubic-Bezier (<number> , <number>, <number>, <number>)贝塞尔曲线</span><br><span class="line">-webkit-animation-delay: 2s;/*动画延迟时间*/</span><br><span class="line">-webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/</span><br><span class="line">-webkit-animation-direction: alternate;/*定义是不翻转动画轨迹*/</span><br><span class="line">-webkit-animation-play-state:paused;/*定义动画的暂停*/</span><br><span class="line">-webkit-animation-fill-mode:none | forwards | backwards | both;/*动画后位置*/</span><br></pre></td></tr></table></figure>
<p>传说的栗子</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-class">.wrap</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">5px</span> solid black;</span><br><span class="line"> <span class="attribute">position</span>: relative;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.wrap</span> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: red;</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="comment">/*transition: 1s;*/</span></span><br><span class="line"> <span class="attribute">animation</span>: move <span class="number">2s</span> <span class="built_in">cubic-bezier</span>(.76,-0.7,.35,1.46) <span class="number">0s</span>;</span><br><span class="line"> <span class="attribute">animation-iteration-count</span>: <span class="number">2</span>;</span><br><span class="line"> <span class="attribute">animation-direction</span>: alternate;</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.wrap</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="comment">/*left: 300px;*/</span></span><br><span class="line"> <span class="attribute">animation-play-state</span>: paused;</span><br><span class="line"> <span class="comment">/*animation-play-state: running;*/</span></span><br><span class="line"> }</span><br><span class="line"> @<span class="keyword">keyframes</span> move{</span><br><span class="line"> 0%{</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0</span>;<span class="attribute">top</span>:<span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> 25%{</span><br><span class="line"> <span class="attribute">left</span>:<span class="number">300px</span>;<span class="attribute">top</span>: <span class="number">0px</span>;</span><br><span class="line"> }</span><br><span class="line"> 50%{</span><br><span class="line"> <span class="attribute">left</span>:<span class="number">300px</span>;<span class="attribute">top</span>: <span class="number">300px</span>;</span><br><span class="line"> }</span><br><span class="line"> 75%{</span><br><span class="line"> <span class="attribute">left</span>:<span class="number">0px</span>;<span class="attribute">top</span>: <span class="number">300px</span>;</span><br><span class="line"> }</span><br><span class="line"> 100%{</span><br><span class="line"> <span class="attribute">left</span>: <span class="number">0px</span>;<span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrap"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>帧动画的栗子</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>Document<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">32px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">35px</span>;</span><br><span class="line"> <span class="attribute">background</span>: <span class="built_in">url</span>(steps.png);</span><br><span class="line"> <span class="attribute">animation</span>:move <span class="number">1s</span> <span class="built_in">steps</span>(3) infinite;<span class="comment">/*分成3帧，每帧移动105px的距离*/</span></span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> @<span class="keyword">keyframes</span> move{</span><br><span class="line"> <span class="selector-tag">from</span>{</span><br><span class="line"> <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">0px</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">to</span>{</span><br><span class="line"> <span class="attribute">background-position</span>: <span class="number">0</span> -<span class="number">105px</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></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">font-spider.org/ 字蛛，中文字体压缩器</span><br><span class="line"></span><br><span class="line">安装字蛛 npm install font-spider -g（Mac系统需要加权限 sudo npm install font-spider -g ，需要电脑密码）</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><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">@<span class="keyword">font-face</span> {</span><br><span class="line"> <span class="attribute">font-family</span>: <span class="string">'pinghei'</span>;</span><br><span class="line"> <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">'../font/pinghei.eot'</span>);</span><br><span class="line"> <span class="attribute">src</span>:</span><br><span class="line"> <span class="built_in">url</span>(<span class="string">'../font/pinghei.eot?#font-spider'</span>) <span class="built_in">format</span>(<span class="string">'embedded-opentype'</span>),</span><br><span class="line"> <span class="built_in">url</span>(<span class="string">'../font/pinghei.woff'</span>) <span class="built_in">format</span>(<span class="string">'woff'</span>),</span><br><span class="line"> <span class="built_in">url</span>(<span class="string">'../font/pinghei.ttf'</span>) <span class="built_in">format</span>(<span class="string">'truetype'</span>),</span><br><span class="line"> <span class="built_in">url</span>(<span class="string">'../font/pinghei.svg'</span>) <span class="built_in">format</span>(<span class="string">'svg'</span>);</span><br><span class="line"> <span class="attribute">font-weight</span>: normal;</span><br><span class="line"> <span class="attribute">font-style</span>: normal;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>终端压缩 到达文件路径后进行压缩 font-spider ./demo/*.html</p>
<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">fontawesome.dashgame.com/</span><br></pre></td></tr></table></figure>
<p>调用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">link</span> <span class="attr">href</span>=<span class="string">"font-awesome-4.5.0/css/font-awesome.min.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-tag">div</span><span class="selector-pseudo">:before</span>{</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">120px</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"fa fa-bell fa-5x"</span>></span><span class="tag"></<span class="name">div</span>></span><span class="tag"><<span class="name">br</span> /></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-camera-retro fa-lg"</span>></span><span class="tag"></<span class="name">i</span>></span> </span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-camera-retro fa-2x"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-camera-retro fa-3x"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-camera-retro fa-4x"</span>></span><span class="tag"></<span class="name">i</span>></span> </span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-camera-retro fa-5x"</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-spinner fa-spin"</span>></span><span class="tag"></<span class="name">i</span>></span> <span class="comment"><!--旋转图标--></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>小贴士</p>
<p>显示Mac系统文件夹目录（终端输入）</p>
<p>defaults write com.apple.finder _FXShowPosixPathInTitle -bool TRUE;killall Finder</p>
<p>CSS3 分栏（适用于：报纸类、文字类）</p>
<p>栏数控制 column-count</p>
<p>栏间距 column-gap</p>
<p>栏宽度 column-width</p>
<p>是否跨栏显示 column-span all/none</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">语法：columns</span><br><span class="line"></span><br><span class="line">column-width：数值 每栏宽度</span><br><span class="line">column-span:all/none 跨栏显示</span><br><span class="line">column-gap :normal/数值 每栏间距</span><br><span class="line">column-count：数字 分栏数目</span><br></pre></td></tr></table></figure>
<p>栗子</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> <span class="selector-class">.wrap</span>{</span><br><span class="line"> <span class="comment">/*-webkit-column-width: 200px;*/</span><span class="comment">/*每栏宽度*/</span></span><br><span class="line"> <span class="attribute">-webkit-column-count</span>: <span class="number">3</span>;<span class="comment">/*分栏数量 如果存在column-width并且宽度不足时，不会分成3栏*/</span></span><br><span class="line"> <span class="attribute">-webkit-column-gap</span>: <span class="number">50px</span>;<span class="comment">/*每栏间距 会影响分栏数目*/</span></span><br><span class="line"> <span class="comment">/*分栏的分割线*/</span></span><br><span class="line"> <span class="attribute">-webkit-column-rule-color</span>: black;<span class="comment">/*颜色*/</span></span><br><span class="line"> <span class="attribute">-webkit-column-rule-width</span>: <span class="number">5px</span>;<span class="comment">/*宽度*/</span></span><br><span class="line"> <span class="attribute">-webkit-column-rule-style</span>: solid;<span class="comment">/*样式*/</span></span><br><span class="line"> <span class="comment">/*-webkit-column-rule: 5px solid black;*/</span></span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">h2</span>{</span><br><span class="line"> <span class="attribute">-webkit-column-span</span>: all;</span><br><span class="line"> <span class="attribute">text-align</span>: center;</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrap"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">h2</span>></span>1213456<span class="tag"></<span class="name">h2</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>dsdsfdsfdsfcd双方的师傅的说法是非常cfdsfdsfdsf所否是宣传宣传否是宣传宣传得税法是否是宣传宣否是宣传宣传否是宣传宣传传v<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣否是宣传宣传否是宣传宣传传否是宣传宣传否是宣传宣传否是宣传宣传否是宣传宣传<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>CSS3 自适应布局</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></pre></td><td class="code"><pre><span class="line">flew-box:弹性布局（IE9以上，手机端部分浏览器有bug）</span><br><span class="line">display：box；转变属性</span><br><span class="line">box-orient 子元素排列方式（水平垂直，默认水平排列每个子元素占据一列）</span><br><span class="line">box-direction 排列顺序</span><br><span class="line">box-flex子元素分配空间(类似分蛋糕，计算同级的蛋糕数量，用剩余宽度除以数量再分配)给子元素设置）</span><br><span class="line">box-ordinal-group 子元素的显示顺序（给子元素设置）</span><br><span class="line">box-anlign 子元素的垂直对齐方式</span><br><span class="line">box-pack 子元素的水平对齐方式</span><br></pre></td></tr></table></figure>
<p>来颗栗子压压惊</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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></pre></td><td class="code"><pre><span class="line"><span class="meta"><!DOCTYPE html></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="css"></span><br><span class="line"> *{</span><br><span class="line"> <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">html</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-tag">body</span>{</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100%</span>;<span class="comment">/*要做全屏时，需要给html和body的height：100%；*/</span></span><br><span class="line"> <span class="attribute">display</span>: -webkit-box;</span><br><span class="line"> <span class="attribute">-webkit-box-orient</span>: vertical;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.header</span>{</span><br><span class="line"> <span class="attribute">display</span>: -webkit-box;</span><br><span class="line"> <span class="comment">/*-webkit-box-orient: vertical;*/</span><span class="comment">/*默认为水平排列*/</span></span><br><span class="line"> <span class="attribute">height</span>: <span class="number">50px</span>;<span class="comment">/*子元素与父级一样高，水平排列为100%高度，垂直排列为100%宽度*/</span></span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.header</span> <span class="selector-class">.logo</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: purple;</span><br><span class="line"> <span class="comment">/*-webkit-box-flex: 1;*/</span><span class="comment">/*不设置时为固定宽度*/</span></span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.header</span> <span class="selector-class">.nav</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: orange;</span><br><span class="line"> <span class="comment">/*width: 100%;*/</span><span class="comment">/*宽度为100%时和父级是一样高度 会超出，这里不用百分比*/</span></span><br><span class="line"> <span class="attribute">-webkit-box-flex</span>: <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.content</span>{</span><br><span class="line"> <span class="attribute">display</span>: -webkit-box;</span><br><span class="line"> <span class="attribute">-webkit-box-flex</span>: <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.content</span> <span class="selector-class">.con1</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: pink;</span><br><span class="line"> <span class="attribute">-webkit-box-flex</span>: <span class="number">3</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.content</span> <span class="selector-class">.con2</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: royalblue;</span><br><span class="line"> <span class="attribute">-webkit-box-flex</span>: <span class="number">3</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.content</span> <span class="selector-class">.con3</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: lightblue;</span><br><span class="line"> <span class="attribute">-webkit-box-flex</span>: <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="selector-class">.footer</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: yellowgreen;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"header"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"logo"</span>></span>上左，宽高固定<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"nav"</span>></span>上右，高度固定，宽度自适应<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"content"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"con1"</span>></span>中1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"con2"</span>></span>中2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"con3"</span>></span>中3<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"footer"</span>></span>底<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure>
<p>小栗子</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wrap"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>1<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>3<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>4<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span>5<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure>
<p>排列顺序</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.wrap</span>{</span><br><span class="line"> <span class="attribute">display</span>:-webkit-box;</span><br><span class="line"> <span class="attribute">-webkit-box-direction</span>: reverse;<span class="comment">/*倒序排列 5 4 3 2 1*/</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>显示顺序</p>
<figure class="highlight css"><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"><span class="selector-class">.wrap</span> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child(1)</span>{</span><br><span class="line"> <span class="attribute">-webkit-box-ordinal-group</span>: <span class="number">3</span>;</span><br><span class="line"> }</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child(2)</span>{</span><br><span class="line"> <span class="attribute">-webkit-box-ordinal-group</span>: <span class="number">4</span>;</span><br><span class="line"> }</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child(3)</span>{</span><br><span class="line"> <span class="attribute">-webkit-box-ordinal-group</span>: <span class="number">2</span>;</span><br><span class="line"> }</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child(4)</span>{</span><br><span class="line"> <span class="attribute">-webkit-box-ordinal-group</span>: <span class="number">5</span>;</span><br><span class="line"> }</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-tag">div</span><span class="selector-pseudo">:nth-child(5)</span>{</span><br><span class="line"> <span class="attribute">-webkit-box-ordinal-group</span>: <span class="number">1</span>;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>对齐方式</p>
<figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.wrap</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">600px</span>;</span><br><span class="line"> <span class="attribute">border</span>: <span class="number">5px</span> solid darkcyan;</span><br><span class="line"> <span class="attribute">display</span>: -webkit-box;</span><br><span class="line"> <span class="attribute">-webkit-box-align</span>: center;<span class="comment">/*垂直居中 在vertical中显示为水平居中 start（默认） end*/</span></span><br><span class="line"> <span class="attribute">-webkit-box-pack</span>: center;<span class="comment">/*水平居中 在vertical中显示为垂直居中 start end justify（两端对齐，只有水平才有）*/</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.wrap</span> <span class="selector-tag">div</span>{</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">background</span>: brown;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>