對js操作html的實踐【2】——隨機標題與滾動標題

先放幾張今天要達成的效果圖

（隨機標題效果）

（滾動標題效果）

接下來放出源碼：

1.隨機標題

1 //指定條目數
2 tips = new Array(1);
3 //條目內容
4 tips[0] = '很抱歉冒險就是從來不會讓人做好準備。';
5 tips[1] = 'Let us start!';
6 index = Math.floor(Math.random() * tips.length);
7 window.document.title += "平行世界 The Parallel Universe - "+tips[index];

（1）在上面的源碼中，用到了隨機數運算，取隨機數的實現可以達成非常多的隨機特效：

取隨機數有以下幾種方法：

1.Math.random(); 結果為0-1間的一個隨機數(包括0,不包括1) 
2.Math.floor(num); 參數num為一個數值，函數結果為num的整數部分。 
3.Math.round(num); 參數num為一個數值，函數結果為num四捨五入後的整數。

Math：數學對象，提供對數據的數學計算。
Math.random(); 返回0和1間(包括0,不包括1)的一個隨機數。

Math.ceil(n); 返回大於等於n的最小整數。
用Math.ceil(Math.random()*10);時，主要獲取1到10的隨機整數，取0的幾率極小。

Math.round(n); 返回n四捨五入後整數的值。
用Math.round(Math.random());可均衡獲取0到1的隨機整數。
用Math.round(Math.random()*10);時，可基本均衡獲取0到10的隨機整數，其中獲取最小值0和最大值10的幾率少一半。

Math.floor(n); 返回小於等於n的最大整數。
用Math.floor(Math.random()*10);時，可均衡獲取0到9的隨機整數。

（參考自互聯網）

（2）是的如果我想加入更多隨機用量，可以這樣寫代碼：

1 //指定條目數
2 tips = new Array(4);
3 //條目內容
4 tips[0] = '很抱歉冒險就是從來不會讓人做好準備。';
5 tips[1] = 'Let us start!';
6 tips[2] = 'QAQ';
7 tips[3] = 'BBQ';
8 index = Math.floor(Math.random() * tips.length);
9 window.document.title += "平行世界 The Parallel Universe - "+tips[index];

這之中用到了數組（tips）許多編程語言都相通，數組的元素是從0開始的

||

代碼很簡單，在此不再贅述。

2.滾動標題。以下是代碼：

 1 var repeat=0 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
 2 var title=document.title
 3 var leng=title.length
 4 var start=1
 5 function titlemove() {
 6   titl=title.substring(start, leng) + title.substring(0, start)
 7   document.title=titl
 8   start++
 9   if (start==leng+1) {
10     start=0
11     if (repeat==0)
12     return
13   }
14   setTimeout("titlemove()",240)
15 }
16 if (document.title)
17 titlemove()

這個代碼也很容易理解，只要弄清楚原理與.substring的用法：源碼中利用substring截取了起始位置（start）到末尾的所有字元。

並將從0開始到start位置的字元加到其末尾，不斷更新達到滾動效果。

ヾ(◍°∇°◍)ﾉﾞ

總結：隨機數、數組等在js中有很大的用處，但還是看創新，我相信想到就能做到！