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

標籤：span   最小   img   技術   程式設計語言   互連網   數值   repeat   參考   

先放幾張今天要達成的

（隨機標題效果）

（滾動標題效果）

接下來放出源碼：

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=011     if (repeat==0)12     return13   }14   setTimeout("titlemove()",240)15 }16 if (document.title)17 titlemove()

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

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

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

 

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