-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
1694 lines (815 loc) · 479 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="Make home at yourself!">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Make home at yourself!">
<meta property="og:description">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Make home at yourself!">
<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> Make home at yourself! </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="Make home at yourself!"/>
</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">Make home at yourself!</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/09/23/event/" itemprop="url">
Drop
</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-09-23T09:18:16+08:00" content="2016-09-23">
2016-09-23
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="拖拽"><a href="#拖拽" class="headerlink" title="拖拽"></a>拖拽</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><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><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</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"> #div1{</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> background: radial-gradient(#fff, yellow);</span><br><span class="line"> position: absolute;</span><br><span class="line"> cursor: move;</span><br><span class="line"> border-radius: 100px;</span><br><span class="line"> line-height: 200px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #fff;</span><br><span class="line"> font-size: 20px;</span><br><span class="line"> cursor: pointer;</span><br><span class="line"> }</span><br><span class="line"> #div2{</span><br><span class="line"> left: 300px;</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> background: radial-gradient(#fff, blue);</span><br><span class="line"> position: absolute;</span><br><span class="line"> cursor: move;</span><br><span class="line"> border-radius: 100px;</span><br><span class="line"> line-height: 200px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #fff;</span><br><span class="line"> font-size: 20px;</span><br><span class="line"> cursor: pointer;</span><br><span class="line"> }</span><br><span class="line"> #div3{</span><br><span class="line"> left: 300px;</span><br><span class="line"> top:300px;</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> background:green;</span><br><span class="line"> position: absolute;</span><br><span class="line"> cursor: move;</span><br><span class="line"> border-radius: 100px;</span><br><span class="line"> line-height: 200px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #fff;</span><br><span class="line"> font-size: 20px;</span><br><span class="line"> }</span><br><span class="line"> #div4{</span><br><span class="line"> left: 500px;</span><br><span class="line"> top:300px;</span><br><span class="line"> width: 200px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> background:green;</span><br><span class="line"> position: absolute;</span><br><span class="line"> cursor: move;</span><br><span class="line"> border-radius: 100px;</span><br><span class="line"> line-height: 200px;</span><br><span class="line"> text-align: center;</span><br><span class="line"> color: #fff;</span><br><span class="line"> font-size: 20px;</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="undefined"></span><br><span class="line"> window.onload = function() {</span><br><span class="line"> // var oDiv = document.getElementById('div1');</span><br><span class="line"></span><br><span class="line"> // oDiv.onmousedown = function(ev) {</span><br><span class="line"> // var oEvent = ev||window.event;</span><br><span class="line"></span><br><span class="line"> // var disX = oEvent.clientX-oDiv.offsetLeft;</span><br><span class="line"> // var disY = oEvent.clientY-oDiv.offsetTop;</span><br><span class="line"></span><br><span class="line"> // document.onmousemove = function(ev){</span><br><span class="line"> // var ev = ev||window.event;</span><br><span class="line"> // oDiv.style.left = ev.clientX-disX+'px';</span><br><span class="line"> // oDiv.style.top = ev.clientY-disY+'px';</span><br><span class="line"> // } </span><br><span class="line"></span><br><span class="line"> // document.onmouseup = function() {</span><br><span class="line"> // document.onmousemove = null;</span><br><span class="line"> // document.onmouseup = null;</span><br><span class="line"> // }</span><br><span class="line"> // }</span><br><span class="line"> balls = document.getElementsByTagName('div');</span><br><span class="line"> var ball = new Drop('div1');</span><br><span class="line"> ball.fnautomove();</span><br><span class="line"> ball.pz(balls);</span><br><span class="line"> var ball2 = new LimitDrop('div2');</span><br><span class="line"> ball2.fnautomove();</span><br><span class="line"> ball2.pz(balls);</span><br><span class="line"> // var ball3 = new Drop('div3');</span><br><span class="line"> // ball3.fnautomove();</span><br><span class="line"> // // ball3.pz(balls);</span><br><span class="line"> // var ball4 = new Drop('div4');</span><br><span class="line"> // ball4.fnautomove();</span><br><span class="line"> // ball4.pz(balls);</span><br><span class="line"> // new LimitDrop('div2').fnautomove();</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> function Drop(id) {</span><br><span class="line"> this.disX = 0;</span><br><span class="line"> this.disY = 0;</span><br><span class="line"> this.speedX = 1;</span><br><span class="line"> this.speedY = 1;</span><br><span class="line"> var _this = this;</span><br><span class="line"></span><br><span class="line"> this.oDiv = document.getElementById(id);</span><br><span class="line"></span><br><span class="line"> this.oDiv.onmousedown = function(ev) {</span><br><span class="line"> _this.fndown(ev);</span><br><span class="line"></span><br><span class="line"> return false;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> Drop.prototype.fndown = function(ev){</span><br><span class="line"> var e = ev||window.event;</span><br><span class="line"> this.disX = e.clientX-this.oDiv.offsetLeft;</span><br><span class="line"> this.disY = e.clientY-this.oDiv.offsetTop;</span><br><span class="line"> var _this = this;</span><br><span class="line"></span><br><span class="line"> document.onmousemove = function(ev){</span><br><span class="line"> _this.fnmove(ev);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> document.onmouseup = function(){</span><br><span class="line"> _this.fnup();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> Drop.prototype.fnmove = function(ev){</span><br><span class="line"> var e = ev||window.event;</span><br><span class="line"></span><br><span class="line"> this.oDiv.style.top = e.clientY-this.disY+'px';</span><br><span class="line"> this.oDiv.style.left = e.clientX-this.disX+'px';</span><br><span class="line"> }</span><br><span class="line"> Drop.prototype.fnup = function(){</span><br><span class="line"> document.onmousemove = null;</span><br><span class="line"> document.onmouseup = null;</span><br><span class="line"> }</span><br><span class="line"> Drop.prototype.fnautomove = function() { </span><br><span class="line"> var _this = this;</span><br><span class="line"> setInterval(function(){</span><br><span class="line"> var top = _this.oDiv.offsetTop;</span><br><span class="line"> var left = _this.oDiv.offsetLeft;</span><br><span class="line"> if(top<0||top>document.documentElement.clientHeight-_this.oDiv.offsetHeight) {</span><br><span class="line"> _this.speedY = -_this.speedY;</span><br><span class="line"> }</span><br><span class="line"> if(left<0||left>document.documentElement.clientWidth-_this.oDiv.offsetWidth){</span><br><span class="line"> _this.speedX = -_this.speedX;</span><br><span class="line"> }</span><br><span class="line"> top += _this.speedY;</span><br><span class="line"> left+=_this.speedX;</span><br><span class="line"> _this.oDiv.style.top = top+'px';</span><br><span class="line"> _this.oDiv.style.left = left+'px';</span><br><span class="line"> },10)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> Drop.prototype.pz = function(balls){</span><br><span class="line"> var _this = this;</span><br><span class="line"> setInterval(function() {</span><br><span class="line"> var zjc = [];</span><br><span class="line"> for(var i = 0;i<balls.length-1;i++){</span><br><span class="line"> var y =(parseInt(balls[i].offsetTop)+parseInt(balls[i].offsetHeight)/2)-(parseInt(balls[i+1].offsetTop)+parseInt(balls[i+1].offsetHeight)/2);</span><br><span class="line"> var x = (parseInt(balls[i].offsetLeft)+parseInt(balls[i].offsetWidth)/2)-(parseInt(balls[i+1].offsetLeft)+parseInt(balls[i+1].offsetWidth)/2);</span><br><span class="line"> </span><br><span class="line"> // console.log(x)</span><br><span class="line"> zjc.push(Math.sqrt(x*x+y*y));</span><br><span class="line"> }</span><br><span class="line"> console.log(zjc)</span><br><span class="line"> for(var j=0;j<zjc.length;j++){ </span><br><span class="line"> if(zjc[j]<200){</span><br><span class="line"> </span><br><span class="line"> _this.speedX = -_this.speedX;</span><br><span class="line"></span><br><span class="line"> // _this.speedY = -_this.speedY</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },0)</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> function LimitDrop(id) {</span><br><span class="line"> Drop.call(this,id);</span><br><span class="line"> this.speedX = -1;</span><br><span class="line"> this.speedY = -1;</span><br><span class="line"> }</span><br><span class="line"> for(var i in Drop.prototype){</span><br><span class="line"> LimitDrop.prototype[i] = Drop.prototype[i];</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> LimitDrop.prototype.fnmove = function(ev) {</span><br><span class="line"> var e = ev||window.event;</span><br><span class="line"> var left = e.clientX-this.disX;</span><br><span class="line"> var top = e.clientY-this.disY;</span><br><span class="line"> if(left<0){</span><br><span class="line"> left = 0;</span><br><span class="line"> }</span><br><span class="line"> else if(left>document.documentElement.clientWidth-this.oDiv.offsetWidth){</span><br><span class="line"> left = document.documentElement.clientWidth-this.oDiv.offsetWidth;</span><br><span class="line"> }</span><br><span class="line"> if(top<0){</span><br><span class="line"> top = 0;</span><br><span class="line"> }</span><br><span class="line"> else if(top>document.documentElement.clientHeight-this.oDiv.offsetHeight) {</span><br><span class="line"> top = document.documentElement.clientHeight-this.oDiv.offsetHeight;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> this.oDiv.style.top = top+'px';</span><br><span class="line"> this.oDiv.style.left = left+'px'; </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">id</span>=<span class="string">"div1"</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">id</span>=<span class="string">"div2"</span>></span>2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="comment"><!-- <div id="div3">3</div></span><br><span class="line"><div id="div4">4</div> --></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>
</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/09/09/question/" itemprop="url">
我的项目
</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-09-09T09:35:26+08:00" content="2016-09-09">
2016-09-09
</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><p><a href="http://daili-11.github.io/vigour/index.html" target="_blank" rel="external">http://daili-11.github.io/vigour/index.html</a>(响应式加点小动画)</p>
<h2 id="100°享乐网"><a href="#100°享乐网" class="headerlink" title="100°享乐网"></a>100°享乐网</h2><h3 id="我的链接地址：-1"><a href="#我的链接地址：-1" class="headerlink" title="我的链接地址："></a>我的链接地址：</h3><p><a href="http://daili-11.github.io/yibaidu/index.html" target="_blank" rel="external">http://daili-11.github.io/yibaidu/index.html</a>(pc端加点小动画)</p>
<h2 id="游戏"><a href="#游戏" class="headerlink" title="游戏"></a>游戏</h2><h3 id="游戏-1-：躲避障碍"><a href="#游戏-1-：躲避障碍" class="headerlink" title="游戏(1)：躲避障碍"></a>游戏(1)：躲避障碍</h3><p><a href="http://daili-11.github.io/hide/index.html" target="_blank" rel="external">http://daili-11.github.io/hide/index.html</a>(用到touch.js)</p>
<h3 id="游戏-2-：微信打飞机"><a href="#游戏-2-：微信打飞机" class="headerlink" title="游戏(2)：微信打飞机"></a>游戏(2)：微信打飞机</h3><p><a href="http://daili-11.github.io/fly/index.html" target="_blank" rel="external">http://daili-11.github.io/fly/index.html</a>(利用canvas)</p>
<h3 id="游戏-3-：寻找徐峥"><a href="#游戏-3-：寻找徐峥" class="headerlink" title="游戏(3)：寻找徐峥"></a>游戏(3)：寻找徐峥</h3><p><a href="http://daili-11.github.io/vivo/index.html" target="_blank" rel="external">http://daili-11.github.io/vivo/index.html</a></p>
<h3 id="游戏-4-：贪吃蛇"><a href="#游戏-4-：贪吃蛇" class="headerlink" title="游戏(4)：贪吃蛇"></a>游戏(4)：贪吃蛇</h3><p><a href="http://daili-11.github.io/snake/foolishsnake.html" target="_blank" rel="external">http://daili-11.github.io/snake/foolishsnake.html</a>(利用canvas)</p>
<p><a href="http://daili-11.github.io/snake/index.html" target="_blank" rel="external">http://daili-11.github.io/snake/index.html</a></p>
<h2 id="移动端兼pc端网站"><a href="#移动端兼pc端网站" class="headerlink" title="移动端兼pc端网站"></a>移动端兼pc端网站</h2><h3 id="网站-1-精英吧"><a href="#网站-1-精英吧" class="headerlink" title="网站(1):精英吧"></a>网站(1):精英吧</h3><p><a href="http://daili-11.github.io/jingyingba/Index/index.html" target="_blank" rel="external">http://daili-11.github.io/jingyingba/Index/index.html</a></p>
<h3 id="网站-2-写意"><a href="#网站-2-写意" class="headerlink" title="网站(2):写意"></a>网站(2):写意</h3><p><a href="http://daili-11.github.io/xieyi/index.html" target="_blank" rel="external">http://daili-11.github.io/xieyi/index.html</a>(响应式布局)</p>
<h3 id="网站-3-兔购移动端"><a href="#网站-3-兔购移动端" class="headerlink" title="网站(3):兔购移动端"></a>网站(3):兔购移动端</h3><p><a href="http://daili-11.github.io/shopping/html/help.html" target="_blank" rel="external">http://daili-11.github.io/shopping/html/help.html</a></p>
<p><a href="http://daili-11.github.io/shopping/html/visual.html" target="_blank" rel="external">http://daili-11.github.io/shopping/html/visual.html</a></p>
<p><a href="http://daili-11.github.io/shopping/html/classify.html" target="_blank" rel="external">http://daili-11.github.io/shopping/html/classify.html</a></p>
<p><a href="http://daili-11.github.io/shopping/html/menu.html" target="_blank" rel="external">http://daili-11.github.io/shopping/html/menu.html</a></p>
<p><a href="http://daili-11.github.io/shopping/html/video.html" target="_blank" rel="external">http://daili-11.github.io/shopping/html/video.html</a></p>
<p><a href="http://daili-11.github.io/shopping/html/loading.html" target="_blank" rel="external">http://daili-11.github.io/shopping/html/loading.html</a></p>
<p><a href="http://daili-11.github.io/shopping/html/set.html" target="_blank" rel="external">http://daili-11.github.io/shopping/html/set.html</a></p>
<p><a href="http://daili-11.github.io/goshopping/html/login.html" target="_blank" rel="external">http://daili-11.github.io/goshopping/html/login.html</a></p>
<p><a href="http://daili-11.github.io/goshopping/html/search.html" target="_blank" rel="external">http://daili-11.github.io/goshopping/html/search.html</a></p>
<p><a href="http://daili-11.github.io/goshopping/html/self.html" target="_blank" rel="external">http://daili-11.github.io/goshopping/html/self.html</a></p>
<p><a href="http://daili-11.github.io/goshopping/html/someone.html" target="_blank" rel="external">http://daili-11.github.io/goshopping/html/someone.html</a></p>
<p><a href="http://daili-11.github.io/goshopping/html/register.html" target="_blank" rel="external">http://daili-11.github.io/goshopping/html/register.html</a></p>
<p><a href="http://daili-11.github.io/goshopping/html/buyCar.html" target="_blank" rel="external">http://daili-11.github.io/goshopping/html/buyCar.html</a></p>
<p><a href="http://daili-11.github.io/goshopping/html/order.html" target="_blank" rel="external">http://daili-11.github.io/goshopping/html/order.html</a></p>
<p><a href="http://daili-11.github.io/tab/html/select.html" target="_blank" rel="external">http://daili-11.github.io/tab/html/select.html</a></p>
<p><a href="http://daili-11.github.io/tab/html/do.html" target="_blank" rel="external">http://daili-11.github.io/tab/html/do.html</a></p>
<p><a href="http://daili-11.github.io/tab/html/xiangqing.html" target="_blank" rel="external">http://daili-11.github.io/tab/html/xiangqing.html</a></p>
<p><a href="http://daili-11.github.io/tab/html/danpin.html" target="_blank" rel="external">http://daili-11.github.io/tab/html/danpin.html</a></p>
<p><a href="http://daili-11.github.io/rabbit/html/findcircle.html" target="_blank" rel="external">http://daili-11.github.io/rabbit/html/findcircle.html</a></p>
<p><a href="http://daili-11.github.io/rabbit/html/zanshang.html" target="_blank" rel="external">http://daili-11.github.io/rabbit/html/zanshang.html</a></p>
<p><a href="http://daili-11.github.io/rabbit/html/publish.html" target="_blank" rel="external">http://daili-11.github.io/rabbit/html/publish.html</a></p>
<p><a href="http://daili-11.github.io/rabbit/html/focus.html" target="_blank" rel="external">http://daili-11.github.io/rabbit/html/focus.html</a></p>
<h3 id="网站-4-团队"><a href="#网站-4-团队" class="headerlink" title="网站(4):团队"></a>网站(4):团队</h3><p>one:关于体育的</p>
<p><a href="http://daili-11.github.io/one/html/index.html" target="_blank" rel="external">http://daili-11.github.io/one/html/index.html</a></p>
<p><a href="http://daili-11.github.io/one/html/news.html" target="_blank" rel="external">http://daili-11.github.io/one/html/news.html</a></p>
<p>two:关于钻石的</p>
<p><a href="http://daili-11.github.io/two/html/index.html" target="_blank" rel="external">http://daili-11.github.io/two/html/index.html</a></p>
<p><a href="http://daili-11.github.io/two/html/renqi.html" target="_blank" rel="external">http://daili-11.github.io/two/html/renqi.html</a></p>
<p><a href="http://daili-11.github.io/two/html/details.html" target="_blank" rel="external">http://daili-11.github.io/two/html/details.html</a></p>
<p>three:关于服装的</p>
<p><a href="http://daili-11.github.io/three/index.html" target="_blank" rel="external">http://daili-11.github.io/three/index.html</a></p>
<p>four:关于耳机的</p>
<p><a href="http://daili-11.github.io/four/html/james.html" target="_blank" rel="external">http://daili-11.github.io/four/html/james.html</a></p>
<p><a href="http://daili-11.github.io/four/html/james2.html" target="_blank" rel="external">http://daili-11.github.io/four/html/james2.html</a></p>
<p><a href="http://daili-11.github.io/four/html/james3.html" target="_blank" rel="external">http://daili-11.github.io/four/html/james3.html</a></p>
<p><a href="http://daili-11.github.io/four/james4.html" target="_blank" rel="external">http://daili-11.github.io/four/james4.html</a></p>
<p>five:关于冲浪的</p>
<p><a href="http://daili-11.github.io/five/demo2.html" target="_blank" rel="external">http://daili-11.github.io/five/demo2.html</a></p>
<p><a href="http://daili-11.github.io/five/index.html" target="_blank" rel="external">http://daili-11.github.io/five/index.html</a></p>
<p>six:关于健身俱乐部的</p>
<p><a href="http://daili-11.github.io/six/inter.html" target="_blank" rel="external">http://daili-11.github.io/six/inter.html</a></p>
<p><a href="http://daili-11.github.io/six/index.html" target="_blank" rel="external">http://daili-11.github.io/six/index.html</a></p>
<p>seven:关于影像仪器的</p>
<p><a href="http://daili-11.github.io/seven/index.html" target="_blank" rel="external">http://daili-11.github.io/seven/index.html</a></p>
<p>eight:关于婚纱摄影的</p>
<p><a href="http://daili-11.github.io/eight/index.html" target="_blank" rel="external">http://daili-11.github.io/eight/index.html</a></p>
<p><a href="http://daili-11.github.io/eight/detail.html" target="_blank" rel="external">http://daili-11.github.io/eight/detail.html</a></p>
<p>nine:关于蛋糕甜点的</p>
<p><a href="http://daili-11.github.io/nine/gallery.html" target="_blank" rel="external">http://daili-11.github.io/nine/gallery.html</a></p>
<p><a href="http://daili-11.github.io/nine/index.html" target="_blank" rel="external">http://daili-11.github.io/nine/index.html</a></p>
<p><a href="http://daili-11.github.io/nine/menu.html" target="_blank" rel="external">http://daili-11.github.io/nine/menu.html</a></p>
<p>ten:LONGBORAD.CN</p>
<p><a href="http://daili-11.github.io/ten/index.html" target="_blank" rel="external">http://daili-11.github.io/ten/index.html</a> 主页</p>
<p><a href="http://daili-11.github.io/twelve/index.html" target="_blank" rel="external">http://daili-11.github.io/twelve/index.html</a> 商城</p>
<p>eleven:三毛摄影</p>
<p><a href="http://daili-11.github.io/eleven/sanmao.html" target="_blank" rel="external">http://daili-11.github.io/eleven/sanmao.html</a></p>
<p><a href="http://daili-11.github.io/eleven/sd.html" target="_blank" rel="external">http://daili-11.github.io/eleven/sd.html</a></p>
<p><a href="http://daili-11.github.io/eleven/yushou.html" target="_blank" rel="external">http://daili-11.github.io/eleven/yushou.html</a></p>
<h2 id="css3动画"><a href="#css3动画" class="headerlink" title="css3动画"></a>css3动画</h2><p><a href="http://daili-11.github.io/periodic/periodic.html" target="_blank" rel="external">http://daili-11.github.io/periodic/periodic.html</a></p>
<p><a href="http://daili-11.github.io/periodic/3d.html" target="_blank" rel="external">http://daili-11.github.io/periodic/3d.html</a></p>
<h2 id="框架swiper效果"><a href="#框架swiper效果" class="headerlink" title="框架swiper效果"></a>框架swiper效果</h2><p><a href="http://daili-11.github.io/swiper/index.html" target="_blank" rel="external">http://daili-11.github.io/swiper/index.html</a></p>
<p><a href="http://daili-11.github.io/dream/index.html" target="_blank" rel="external">http://daili-11.github.io/dream/index.html</a> </p>
<p>用到了zepto.min.js touch.js Swiper.min.js</p>
</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/09/08/others/" itemprop="url">
程序员常用网址
</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-09-08T14:23:06+08:00" content="2016-09-08">
2016-09-08
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="视频学习网址："><a href="#视频学习网址：" class="headerlink" title="视频学习网址："></a>视频学习网址：</h2><h3 id="1、猿代码-http-www-ydma-cn"><a href="#1、猿代码-http-www-ydma-cn" class="headerlink" title="1、猿代码 http://www.ydma.cn/"></a>1、猿代码 <a href="http://www.ydma.cn/" target="_blank" rel="external">http://www.ydma.cn/</a></h3><h3 id="2、慕课网-http-www-imooc-com"><a href="#2、慕课网-http-www-imooc-com" class="headerlink" title="2、慕课网 http://www.imooc.com/"></a>2、慕课网 <a href="http://www.imooc.com/" target="_blank" rel="external">http://www.imooc.com/</a></h3><h3 id="3、麦子学院-http-www-maiziedu-com"><a href="#3、麦子学院-http-www-maiziedu-com" class="headerlink" title="3、麦子学院 http://www.maiziedu.com/"></a>3、麦子学院 <a href="http://www.maiziedu.com/" target="_blank" rel="external">http://www.maiziedu.com/</a></h3><h3 id="4、极客学院-http-www-jikexueyuan-com"><a href="#4、极客学院-http-www-jikexueyuan-com" class="headerlink" title="4、极客学院 http://www.jikexueyuan.com/"></a>4、极客学院 <a href="http://www.jikexueyuan.com/" target="_blank" rel="external">http://www.jikexueyuan.com/</a></h3><h3 id="5、CSDN网-http-edu-csdn-net"><a href="#5、CSDN网-http-edu-csdn-net" class="headerlink" title="5、CSDN网 http://edu.csdn.net/"></a>5、CSDN网 <a href="http://edu.csdn.net/" target="_blank" rel="external">http://edu.csdn.net/</a></h3><h2 id="模拟环境学习网址："><a href="#模拟环境学习网址：" class="headerlink" title="模拟环境学习网址："></a>模拟环境学习网址：</h2><h3 id="1、计蒜客-http-www-jisuanke-com"><a href="#1、计蒜客-http-www-jisuanke-com" class="headerlink" title="1、计蒜客 http://www.jisuanke.com/"></a>1、计蒜客 <a href="http://www.jisuanke.com/" target="_blank" rel="external">http://www.jisuanke.com/</a></h3><h3 id="2、实验楼-https-www-shiyanlou-com"><a href="#2、实验楼-https-www-shiyanlou-com" class="headerlink" title="2、实验楼 https://www.shiyanlou.com/"></a>2、实验楼 <a href="https://www.shiyanlou.com/" target="_blank" rel="external">https://www.shiyanlou.com/</a></h3><h2 id="资源网站："><a href="#资源网站：" class="headerlink" title="资源网站："></a>资源网站：</h2><h3 id="1、什么都有的网站-https-github-com"><a href="#1、什么都有的网站-https-github-com" class="headerlink" title="1、什么都有的网站 https://github.com/"></a>1、什么都有的网站 <a href="https://github.com/" target="_blank" rel="external">https://github.com/</a></h3><h3 id="2、前端素材资源网-http-www-iguoguo-net"><a href="#2、前端素材资源网-http-www-iguoguo-net" class="headerlink" title="2、前端素材资源网 http://www.iguoguo.net/"></a>2、前端素材资源网 <a href="http://www.iguoguo.net/" target="_blank" rel="external">http://www.iguoguo.net/</a></h3><h3 id="3、程序员网址大全-http-www-tnten-com"><a href="#3、程序员网址大全-http-www-tnten-com" class="headerlink" title="3、程序员网址大全 http://www.tnten.com/"></a>3、程序员网址大全 <a href="http://www.tnten.com/" target="_blank" rel="external">http://www.tnten.com/</a></h3><h3 id="3、微信学习网站"><a href="#3、微信学习网站" class="headerlink" title="3、微信学习网站"></a>3、微信学习网站</h3><p><a href="http://www.cnblogs.com/txw1958/p/wechat-tutorial.html" target="_blank" rel="external">http://www.cnblogs.com/txw1958/p/wechat-tutorial.html</a></p>
<h3 id="4、微信开发官方文档"><a href="#4、微信开发官方文档" class="headerlink" title="4、微信开发官方文档"></a>4、微信开发官方文档</h3><p><a href="http://mp.weixin.qq.com/wiki/home/" target="_blank" rel="external">http://mp.weixin.qq.com/wiki/home/</a></p>
<h3 id="5、图灵机器人"><a href="#5、图灵机器人" class="headerlink" title="5、图灵机器人"></a>5、图灵机器人</h3><p><a href="http://www.tuling123.com/openapi/cloud/home.jsp" target="_blank" rel="external">http://www.tuling123.com/openapi/cloud/home.jsp</a></p>
<h3 id="6、免费资源部落"><a href="#6、免费资源部落" class="headerlink" title="6、免费资源部落"></a>6、免费资源部落</h3><p><a href="http://www.freehao123.com/" target="_blank" rel="external">http://www.freehao123.com/</a></p>
<h3 id="7、免费在线客服系统"><a href="#7、免费在线客服系统" class="headerlink" title="7、免费在线客服系统"></a>7、免费在线客服系统</h3><p><a href="http://www.54kefu.net/" target="_blank" rel="external">http://www.54kefu.net/</a></p>
<h3 id="8、类似w3c的网站"><a href="#8、类似w3c的网站" class="headerlink" title="8、类似w3c的网站"></a>8、类似w3c的网站</h3><p><a href="http://www.runoob.com/" target="_blank" rel="external">http://www.runoob.com/</a></p>
<h2 id="前端框架网站："><a href="#前端框架网站：" class="headerlink" title="前端框架网站："></a>前端框架网站：</h2><h3 id="1、Bootstrap中文网-http-www-bootcss-com"><a href="#1、Bootstrap中文网-http-www-bootcss-com" class="headerlink" title="1、Bootstrap中文网 http://www.bootcss.com/"></a>1、Bootstrap中文网 <a href="http://www.bootcss.com/" target="_blank" rel="external">http://www.bootcss.com/</a></h3><h3 id="2、jQuery插件网-有大量插件"><a href="#2、jQuery插件网-有大量插件" class="headerlink" title="2、jQuery插件网(有大量插件)"></a>2、jQuery插件网(有大量插件)</h3><p><a href="http://www.jq22.com/" target="_blank" rel="external">http://www.jq22.com/</a></p>
<h3 id="3、jQuery、HTML5"><a href="#3、jQuery、HTML5" class="headerlink" title="3、jQuery、HTML5"></a>3、jQuery、HTML5</h3><p><a href="http://www.htmleaf.com/" target="_blank" rel="external">http://www.htmleaf.com/</a></p>
<h3 id="4、移动端的jQuery"><a href="#4、移动端的jQuery" class="headerlink" title="4、移动端的jQuery"></a>4、移动端的jQuery</h3><p><a href="http://zeptojs.com/" target="_blank" rel="external">http://zeptojs.com/</a></p>
<h3 id="6、实现滑动效果的JS"><a href="#6、实现滑动效果的JS" class="headerlink" title="6、实现滑动效果的JS"></a>6、实现滑动效果的JS</h3><p><a href="https://github.com/thebird/swipe" target="_blank" rel="external">https://github.com/thebird/swipe</a></p>
<h3 id="7、实现多点触摸的JS"><a href="#7、实现多点触摸的JS" class="headerlink" title="7、实现多点触摸的JS"></a>7、实现多点触摸的JS</h3><p><a href="http://hammerjs.github.io/" target="_blank" rel="external">http://hammerjs.github.io/</a></p>
<h3 id="8、QUOJS"><a href="#8、QUOJS" class="headerlink" title="8、QUOJS"></a>8、QUOJS</h3><p><a href="http://quojs.tapquo.com/" target="_blank" rel="external">http://quojs.tapquo.com/</a></p>
<h3 id="9、图标绘制工具库JS"><a href="#9、图标绘制工具库JS" class="headerlink" title="9、图标绘制工具库JS"></a>9、图标绘制工具库JS</h3><p><a href="http://www.bootcss.com/p/chart.js/" target="_blank" rel="external">http://www.bootcss.com/p/chart.js/</a></p>
<h3 id="10、国内弹窗JS插件"><a href="#10、国内弹窗JS插件" class="headerlink" title="10、国内弹窗JS插件"></a>10、国内弹窗JS插件</h3><p><a href="http://lab.seaning.com/" target="_blank" rel="external">http://lab.seaning.com/</a></p>
<h3 id="11、前端资源网站"><a href="#11、前端资源网站" class="headerlink" title="11、前端资源网站"></a>11、前端资源网站</h3><p><a href="http://www.js-css.cn/" target="_blank" rel="external">http://www.js-css.cn/</a></p>
<h3 id="12、前端开发仓库"><a href="#12、前端开发仓库" class="headerlink" title="12、前端开发仓库"></a>12、前端开发仓库</h3><p><a href="http://code.ciaoca.com/" target="_blank" rel="external">http://code.ciaoca.com/</a></p>
<h2 id="上传插件："><a href="#上传插件：" class="headerlink" title="上传插件："></a>上传插件：</h2><h3 id="1、http-www-dropzonejs-com"><a href="#1、http-www-dropzonejs-com" class="headerlink" title="1、http://www.dropzonejs.com/"></a>1、<a href="http://www.dropzonejs.com/" target="_blank" rel="external">http://www.dropzonejs.com/</a></h3><h3 id="2、http-www-uploadify-com"><a href="#2、http-www-uploadify-com" class="headerlink" title="2、http://www.uploadify.com/"></a>2、<a href="http://www.uploadify.com/" target="_blank" rel="external">http://www.uploadify.com/</a></h3><h2 id="程序员面试题："><a href="#程序员面试题：" class="headerlink" title="程序员面试题："></a>程序员面试题：</h2><h3 id="1、牛课网-http-www-nowcoder-com"><a href="#1、牛课网-http-www-nowcoder-com" class="headerlink" title="1、牛课网 http://www.nowcoder.com/"></a>1、牛课网 <a href="http://www.nowcoder.com/" target="_blank" rel="external">http://www.nowcoder.com/</a></h3><h2 id="翻墙软件推荐："><a href="#翻墙软件推荐：" class="headerlink" title="翻墙软件推荐："></a>翻墙软件推荐：</h2><h3 id="1、lantern-http-www-getlantern-org"><a href="#1、lantern-http-www-getlantern-org" class="headerlink" title="1、lantern http://www.getlantern.org/"></a>1、lantern <a href="http://www.getlantern.org/" target="_blank" rel="external">http://www.getlantern.org/</a></h3><h2 id="弹窗对话框插件："><a href="#弹窗对话框插件：" class="headerlink" title="弹窗对话框插件："></a>弹窗对话框插件：</h2><h3 id="1、Larer-http-layer-layui-com"><a href="#1、Larer-http-layer-layui-com" class="headerlink" title="1、Larer http://layer.layui.com/"></a>1、Larer <a href="http://layer.layui.com/" target="_blank" rel="external">http://layer.layui.com/</a></h3><h3 id="2、artDialog"><a href="#2、artDialog" class="headerlink" title="2、artDialog"></a>2、artDialog</h3><p><a href="http://lab.seaning.com/index.html" target="_blank" rel="external">http://lab.seaning.com/index.html</a></p>
<h2 id="图片裁剪插件："><a href="#图片裁剪插件：" class="headerlink" title="图片裁剪插件："></a>图片裁剪插件：</h2><h3 id="1、jscrop"><a href="#1、jscrop" class="headerlink" title="1、jscrop"></a>1、jscrop</h3><p><a href="http://jcrop.org/" target="_blank" rel="external">http://jcrop.org/</a> </p>
<p><a href="http://www.cnblogs.com/xiaoyao2011/archive/2012/06/29/Jcrop.html" target="_blank" rel="external">http://www.cnblogs.com/xiaoyao2011/archive/2012/06/29/Jcrop.html</a></p>
<h2 id="表单验证"><a href="#表单验证" class="headerlink" title="表单验证"></a>表单验证</h2><h3 id="1、http-validform-rjboy-cn"><a href="#1、http-validform-rjboy-cn" class="headerlink" title="1、http://validform.rjboy.cn/"></a>1、<a href="http://validform.rjboy.cn/" target="_blank" rel="external">http://validform.rjboy.cn/</a></h3><h2 id="基于bootstrap后台框架"><a href="#基于bootstrap后台框架" class="headerlink" title="基于bootstrap后台框架:"></a>基于bootstrap后台框架:</h2><h3 id="1、ACE"><a href="#1、ACE" class="headerlink" title="1、ACE"></a>1、ACE</h3><h3 id="2、Amaze"><a href="#2、Amaze" class="headerlink" title="2、Amaze"></a>2、Amaze</h3><p><a href="http://www.js-css.cn/divcss/admin/Amaze/admin-table.html" target="_blank" rel="external">http://www.js-css.cn/divcss/admin/Amaze/admin-table.html</a></p>
<h2 id="蘑菇街开源的一款企业办公及时通信软件："><a href="#蘑菇街开源的一款企业办公及时通信软件：" class="headerlink" title="蘑菇街开源的一款企业办公及时通信软件："></a>蘑菇街开源的一款企业办公及时通信软件：</h2><p><a href="https://github.com/mogutt/README" target="_blank" rel="external">https://github.com/mogutt/README</a></p>
<p><a href="http://tt.mogu.io/" target="_blank" rel="external">http://tt.mogu.io/</a></p>
<h2 id="使用PHP-Swoole实现的网页即时聊天工具"><a href="#使用PHP-Swoole实现的网页即时聊天工具" class="headerlink" title="使用PHP+Swoole实现的网页即时聊天工具"></a>使用PHP+Swoole实现的网页即时聊天工具</h2><p><a href="https://github.com/matyhtf/php-webim" target="_blank" rel="external">https://github.com/matyhtf/php-webim</a></p>
<h2 id="PHP聊天框架："><a href="#PHP聊天框架：" class="headerlink" title="PHP聊天框架："></a>PHP聊天框架：</h2><p><a href="http://www.workerman.net/" target="_blank" rel="external">http://www.workerman.net/</a></p>
<h2 id="收集了有关互联网相关信息（RFC）"><a href="#收集了有关互联网相关信息（RFC）" class="headerlink" title="收集了有关互联网相关信息（RFC）"></a>收集了有关互联网相关信息（RFC）</h2><p><a href="http://oss.org.cn/man/develop/rfc/default.htm" target="_blank" rel="external">http://oss.org.cn/man/develop/rfc/default.htm</a></p>
</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/09/01/daidai/" itemprop="url">
移动H5前端性能优化指南
</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-09-01T20:49:11+08:00" content="2016-09-01">
2016-09-01
</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><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">1. PC优化手段在Mobile侧同样适用</span><br><span class="line">2. 在Mobile侧我们提出三秒种渲染完成首屏指标</span><br><span class="line">3. 基于第二点，首屏加载3秒完成或使用Loading</span><br><span class="line">4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB</span><br><span class="line">5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点</span><br><span class="line">6. 基于第五点，要合理处理代码减少渲染损耗</span><br><span class="line">7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置</span><br><span class="line">8. 加载完成后用户交互使用时也需注意性能</span><br></pre></td></tr></table></figure>
<h2 id="优化指南"><a href="#优化指南" class="headerlink" title="优化指南"></a>优化指南</h2><h3 id="加载优化"><a href="#加载优化" class="headerlink" title="[加载优化]"></a>[加载优化]</h3><p>加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点</p>
<h4 id="·-减少HTTP请求"><a href="#·-减少HTTP请求" class="headerlink" title="· 减少HTTP请求"></a>· 减少HTTP请求</h4><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">因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个</span><br><span class="line">a) 合并CSS、JavaScript</span><br><span class="line">b) 合并小图片，使用雪碧图</span><br></pre></td></tr></table></figure>
<h4 id="·-缓存"><a href="#·-缓存" class="headerlink" title="· 缓存"></a>· 缓存</h4><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">使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）</span><br><span class="line">a) 缓存一切可缓存的资源</span><br><span class="line">b) 使用长Cache（使用时间戳更新Cache）</span><br><span class="line">c) 使用外联式引用CSS、JavaScript</span><br></pre></td></tr></table></figure>
<h4 id="·-压缩HTML、CSS、JavaScript"><a href="#·-压缩HTML、CSS、JavaScript" class="headerlink" title="· 压缩HTML、CSS、JavaScript"></a>· 压缩HTML、CSS、JavaScript</h4><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">减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip</span><br><span class="line">a) 压缩（例如，多余的空格、换行符和缩进）</span><br><span class="line">b) 启用GZip</span><br></pre></td></tr></table></figure>
<h4 id="·-无阻塞"><a href="#·-无阻塞" class="headerlink" title="· 无阻塞"></a>· 无阻塞</h4><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">写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载</span><br></pre></td></tr></table></figure>
<h4 id="·-使用首屏加载"><a href="#·-使用首屏加载" class="headerlink" title="· 使用首屏加载"></a>· 使用首屏加载</h4><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">首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化</span><br></pre></td></tr></table></figure>
<h4 id="·-按需加载"><a href="#·-按需加载" class="headerlink" title="· 按需加载"></a>· 按需加载</h4><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">PS：按需加载会导致大量重绘，影响渲染性能</span><br><span class="line">a) LazyLoad</span><br><span class="line">b) 滚屏加载</span><br><span class="line">c) 通过Media Query加载</span><br></pre></td></tr></table></figure>
<h4 id="·-预加载"><a href="#·-预加载" class="headerlink" title="· 预加载"></a>· 预加载</h4><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">大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失</span><br><span class="line">对用户行为分析，可以在当前页加载下一页资源，提升速度</span><br><span class="line">a) 可感知Loading(如进入空间游戏的Loading)</span><br><span class="line">b) 不可感知的Loading（如提前加载下一页）</span><br></pre></td></tr></table></figure>
<h4 id="·-压缩图片"><a href="#·-压缩图片" class="headerlink" title="· 压缩图片"></a>· 压缩图片</h4><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">图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示</span><br><span class="line">PS：过度压缩图片大小影响图片显示效果</span><br><span class="line">a) 使用智图（ http://zhitu.isux.us/ ）</span><br><span class="line">b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)</span><br><span class="line">c) 使用Srcset</span><br><span class="line">d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)</span><br><span class="line">e) 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））</span><br></pre></td></tr></table></figure>
<h4 id="·-减少Cookie"><a href="#·-减少Cookie" class="headerlink" title="· 减少Cookie"></a>· 减少Cookie</h4><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">Cookie会影响加载速度，所以静态资源域名不使用Cookie</span><br></pre></td></tr></table></figure>
<h4 id="·-避免重定向"><a href="#·-避免重定向" class="headerlink" title="· 避免重定向"></a>· 避免重定向</h4><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">重定向会影响加载速度，所以在服务器正确设置避免重定向</span><br></pre></td></tr></table></figure>
<h4 id="·-异步加载第三方资源"><a href="#·-异步加载第三方资源" class="headerlink" title="· 异步加载第三方资源"></a>· 异步加载第三方资源</h4><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">第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源</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></pre></td><td class="code"><pre><span class="line">脚本处理不当会阻塞页面加载、渲染，因此在使用时需当注意</span><br></pre></td></tr></table></figure>
<h4 id="·-CSS写在头部，JavaScript写在尾部或异步"><a href="#·-CSS写在头部，JavaScript写在尾部或异步" class="headerlink" title="· CSS写在头部，JavaScript写在尾部或异步"></a>· CSS写在头部，JavaScript写在尾部或异步</h4><h4 id="·-避免图片和iFrame等的空Src"><a href="#·-避免图片和iFrame等的空Src" class="headerlink" title="· 避免图片和iFrame等的空Src"></a>· 避免图片和iFrame等的空Src</h4><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">空Src会重新加载当前页面，影响速度和效率</span><br></pre></td></tr></table></figure>
<h4 id="·-尽量避免重设图片大小"><a href="#·-尽量避免重设图片大小" class="headerlink" title="· 尽量避免重设图片大小"></a>· 尽量避免重设图片大小</h4><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">重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能</span><br></pre></td></tr></table></figure>
<h4 id="·-图片尽量避免使用DataURL"><a href="#·-图片尽量避免使用DataURL" class="headerlink" title="· 图片尽量避免使用DataURL"></a>· 图片尽量避免使用DataURL</h4><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">DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长</span><br></pre></td></tr></table></figure>
<h3 id="CSS优化"><a href="#CSS优化" class="headerlink" title="[CSS优化]"></a>[CSS优化]</h3><h4 id="·-尽量避免写在HTML标签中写Style属性"><a href="#·-尽量避免写在HTML标签中写Style属性" class="headerlink" title="· 尽量避免写在HTML标签中写Style属性"></a>· 尽量避免写在HTML标签中写Style属性</h4><h4 id="·-避免CSS表达式"><a href="#·-避免CSS表达式" class="headerlink" title="· 避免CSS表达式"></a>· 避免CSS表达式</h4><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">CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式</span><br></pre></td></tr></table></figure>
<h4 id="·-移除空的CSS规则"><a href="#·-移除空的CSS规则" class="headerlink" title="· 移除空的CSS规则"></a>· 移除空的CSS规则</h4><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">空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则</span><br></pre></td></tr></table></figure>
<h4 id="·-正确使用Display的属性"><a href="#·-正确使用Display的属性" class="headerlink" title="· 正确使用Display的属性"></a>· 正确使用Display的属性</h4><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">Display属性会影响页面的渲染，因此请合理使用</span><br><span class="line">a) display:inline后不应该再使用width、height、margin、padding以及float</span><br><span class="line">b) display:inline-block后不应该再使用float</span><br><span class="line">c) display:block后不应该再使用vertical-align</span><br><span class="line">d) display:table-*后不应该再使用margin或者float</span><br></pre></td></tr></table></figure>
<h4 id="·-不滥用Float"><a href="#·-不滥用Float" class="headerlink" title="· 不滥用Float"></a>· 不滥用Float</h4><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">Float在渲染时计算量比较大，尽量减少使用</span><br></pre></td></tr></table></figure>
<h4 id="·-不滥用Web字体"><a href="#·-不滥用Web字体" class="headerlink" title="· 不滥用Web字体"></a>· 不滥用Web字体</h4><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">Web字体需要下载，解析，重绘当前页面，尽量减少使用</span><br></pre></td></tr></table></figure>
<h4 id="·-不声明过多的Font-size"><a href="#·-不声明过多的Font-size" class="headerlink" title="· 不声明过多的Font-size"></a>· 不声明过多的Font-size</h4><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">过多的Font-size引发CSS树的效率</span><br></pre></td></tr></table></figure>
<h4 id="·-值为0时不需要任何单位"><a href="#·-值为0时不需要任何单位" class="headerlink" title="· 值为0时不需要任何单位"></a>· 值为0时不需要任何单位</h4><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">为了浏览器的兼容性和性能，值为0时不要带单位</span><br></pre></td></tr></table></figure>
<h4 id="·-标准化各种浏览器前缀"><a href="#·-标准化各种浏览器前缀" class="headerlink" title="· 标准化各种浏览器前缀"></a>· 标准化各种浏览器前缀</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">a) 无前缀应放在最后</span><br><span class="line">b) CSS动画只用 （-webkit- 无前缀）两种即可</span><br><span class="line">c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以淘汰）</span><br></pre></td></tr></table></figure>
<h4 id="·-避免让选择符看起来像正则表达式"><a href="#·-避免让选择符看起来像正则表达式" class="headerlink" title="· 避免让选择符看起来像正则表达式"></a>· 避免让选择符看起来像正则表达式</h4><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">高级选择器执行耗时长且不易读懂，避免使用</span><br></pre></td></tr></table></figure>
<h3 id="JavaScript执行优化"><a href="#JavaScript执行优化" class="headerlink" title="[JavaScript执行优化]"></a>[JavaScript执行优化]</h3><h4 id="·-减少重绘和回流"><a href="#·-减少重绘和回流" class="headerlink" title="· 减少重绘和回流"></a>· 减少重绘和回流</h4><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">a) 避免不必要的Dom操作</span><br><span class="line">b) 尽量改变Class而不是Style，使用classList代替className</span><br><span class="line">c) 避免使用document.write</span><br><span class="line">d) 减少drawImage</span><br></pre></td></tr></table></figure>
<h4 id="·-缓存Dom选择与计算"><a href="#·-缓存Dom选择与计算" class="headerlink" title="· 缓存Dom选择与计算"></a>· 缓存Dom选择与计算</h4><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">每次Dom选择都要计算，缓存他</span><br></pre></td></tr></table></figure>
<h4 id="·-缓存列表-length"><a href="#·-缓存列表-length" class="headerlink" title="· 缓存列表.length"></a>· 缓存列表.length</h4><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">每次.length都要计算，用一个变量保存这个值</span><br></pre></td></tr></table></figure>
<h4 id="·-尽量使用事件代理，避免批量绑定事件"><a href="#·-尽量使用事件代理，避免批量绑定事件" class="headerlink" title="· 尽量使用事件代理，避免批量绑定事件"></a>· 尽量使用事件代理，避免批量绑定事件</h4><h4 id="·-尽量使用ID选择器"><a href="#·-尽量使用ID选择器" class="headerlink" title="· 尽量使用ID选择器"></a>· 尽量使用ID选择器</h4><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">ID选择器是最快的</span><br></pre></td></tr></table></figure>
<h4 id="·-TOUCH事件优化"><a href="#·-TOUCH事件优化" class="headerlink" title="· TOUCH事件优化"></a>· TOUCH事件优化</h4><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">使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作</span><br></pre></td></tr></table></figure>
<h3 id="渲染优化"><a href="#渲染优化" class="headerlink" title="[渲染优化]"></a>[渲染优化]</h3><h4 id="·-HTML使用Viewport"><a href="#·-HTML使用Viewport" class="headerlink" title="· HTML使用Viewport"></a>· HTML使用Viewport</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Viewport可以加速页面的渲染，请使用以下代码</span><br><span class="line"><meta name="viewport" content="width=device-width, initial-scale=1"></span><br></pre></td></tr></table></figure>
<h4 id="·-减少Dom节点"><a href="#·-减少Dom节点" class="headerlink" title="· 减少Dom节点"></a>· 减少Dom节点</h4><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">Dom节点太多影响页面的渲染，应尽量减少Dom节点</span><br></pre></td></tr></table></figure>
<h4 id="·-动画优化"><a href="#·-动画优化" class="headerlink" title="· 动画优化"></a>· 动画优化</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">a) 尽量使用CSS3动画</span><br><span class="line">b) 合理使用requestAnimationFrame动画代替setTimeout</span><br><span class="line">c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）</span><br></pre></td></tr></table></figure>
<h4 id="·-高频事件优化"><a href="#·-高频事件优化" class="headerlink" title="· 高频事件优化"></a>· 高频事件优化</h4><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">Touchmove、Scroll 事件可导致多次渲染</span><br><span class="line">a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染</span><br><span class="line">b) 增加响应变化的时间间隔，减少重绘次数</span><br></pre></td></tr></table></figure>
<h4 id="·-GPU加速"><a href="#·-GPU加速" class="headerlink" title="· GPU加速"></a>· GPU加速</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用</span><br><span class="line">PS：过渡使用会引发手机过耗电增加</span><br></pre></td></tr></table></figure>
<h3 id="前端综合学习"><a href="#前端综合学习" class="headerlink" title="前端综合学习"></a>前端综合学习</h3><h4 id="https-github-com-jsfront-src-blob-master-qq-md"><a href="#https-github-com-jsfront-src-blob-master-qq-md" class="headerlink" title=". https://github.com/jsfront/src/blob/master/qq.md"></a>. <a href="https://github.com/jsfront/src/blob/master/qq.md" target="_blank" rel="external">https://github.com/jsfront/src/blob/master/qq.md</a></h4><h3 id="我的技术网站"><a href="#我的技术网站" class="headerlink" title="我的技术网站"></a>我的技术网站</h3><h4 id="https-segmentfault-com-u-daily-daili"><a href="#https-segmentfault-com-u-daily-daili" class="headerlink" title=".https://segmentfault.com/u/daily_daili"></a>.<a href="https://segmentfault.com/u/daily_daili" target="_blank" rel="external">https://segmentfault.com/u/daily_daili</a></h4>
</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/xo/" itemprop="url">
hexo
</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">
function
</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>