2017.11.24——學習筆記（一）【數字雨及數組分割知識】

【以下作品非原創，僅學慣用】 <style> html,body{ width: 100%;height: 100%;overflow: hidden; } </style></head><body> <canvas id="cav"></canvas> <script> var cav = doc ...

【以下作品非原創，僅學慣用】

var cav = document.getElementById('cav');
var ctx = cav.getContext('2d');
var W = window.innerWidth;
var H = window.innerHeight;
console.log(window.innerHeight);
console.log(document.body.clientWidth);
cav.width = W;
cav.height = H;
var fontsize = 16;
var columns = Math.ceil(W/fontsize);
var drops = [];
var texts = "0123456789".split("");//生成一個字元串數組texts = ["0","1","2","3","4",......]
for(var i=0;i<columns;i++){
　　drops[i]=0;
　　//drops[i]是數字雨墜落的總列數
　　//直接給drops數組創建了columns個對象不過各個對象都是零.
　　console.log(drops[i]);
}

//1.設置畫布基礎設置
//2.讀取視窗寬高
//3.讓畫布寬高等於視窗寬高
//4.定義變數fontsize = 16;用途有2,1是用視窗寬度/fontsize來數字雨的列數.
//5.定義數組drops,這是數字雨的列.
//6.創建字元串數組texts,包含需要在畫布中繪畫出來的數字
//7.依照column的數值遍歷出數字雨的列數,塞進drops數組裡,讓列數們的初始值等於0;

//8.繪出底色,因為是用定時器不停地繪製出來,所以透明度調低,營造出跳出來的數字漸漸消失的景象(事實上是被每30毫秒繪出來的底色不停地覆蓋)
//8.5遍歷出drops[i]--這個數組裡,的每一個元素,都指索引所對應的那個列里,目前包含的數字的數目.
//9.用fontsize設置字體大小,設置字體.
//10.事實上每30毫秒每一列同時出現一個數字,所以又以列數遍歷生成每列一個隨機數字--text =[Math.floor(Math.random()*texts.length)];
//random的區間在0~1,texts.length=10,然後四捨五入變為整數,也就是會生成0~9的數字
//11.然後隨機找個坐標為(x = i*fontsize,y = drops[i]*fontsize)的位置畫出來.
//12.判定:1.如果drops[i].fontsize即將超出現有視窗的高度H,讓這個列的數目為0,它將從0*fontsize的位置重新繪製數字(也就是從頭開始嘛); 2.如果隨機數即將大於0.95(也就是會算出text=10),讓它如上述一樣從頭開始.

array.slice( start,end )--數組
　　該方法是對數組進行部分截取,並返回一個數組副本
　　start : 截取的開始數組索引
　　end : 你要取得最後一個數組元素的索引加上1
　　截到的數組的索引為: end-1
　　*原數組不改變*
<script>
　　var a = [1,2,3,4,5,6];
　　var b = a.slice(3);//如果不傳入end,則會從start截到數組尾部
　　var c = a.slice(2,4);//截到a[2]-a[3],
　　console.log(c);

　　var d = a.slice(-1);//輸出b = [a[5]];如果兩個參數任何一個是負數,array.length會和它們相加,試圖讓他們成為非負數.
　　//當只傳入一個負數時,length會與參數相加,然後由此作為索引截取
　　console.log(d)

　　var e = a.slice(-6);
　　//當只傳入一個參數,是負數時,並且參數絕大值大於數組length,會截取整個數組.因為參數+length會小於0嘛,索引小於0,就按0開始截羅
　　console.log(e)

　　var f = a.slice(-4,-1);
　　//當傳入兩個其中有負的參數時,length也會先與負數相加後,再截取
　　//一切都按照與length相加後剩餘的數做索引為準,end若為負相加之後還是要-1

　　console.log(f)

　　var g = b.slice(6);//當傳入一個參數,大於等於length時,返回一個空數組
　　console.log(g)
</script>

string.slice( start,end )--字元串
　　slice方法複製string的一部分來構造一個新的字元串,用法與參數均和數組的slice方法一樣,end參數等於你要取的最後一個字元的位置值加上1
　　字元串中空格也占一個索引

array.splice( start, deleteCount, item )
　　splice從array中移除一個或多個數組,並用新的item替換它們,參數start是從數組array中移除元素的開始位置,參數deleteCount是要移除的元素的個數,如果有額外的參數,那麼item會插入到被移出元素的位置上,它返回一個包含被移除元素的數組。

　　原數組中不再包含被移除掉的元素

　　d = 在c數組裡移除的c[2],c[3], 後面的item參數不會包在d數組裡,二是被插進了c數組裡原本c[2]的位置,item作用於被移除元素的原數組。
<script>
{
　　var a = ['a','b','c',1,2,3];
　　var b = a.splice(2,2);
　　console.log(a)
　　console.log(b)
　　var c = ['a','b','c',1,2,3,{f:9}];
　　var d = c.splice(2,2,function(){ var i=baby });
　　console.log(c);
　　console.log(d);

//d = 在c數組裡移除的c[2],c[3], 後面的item參數不會包在d數組裡,二是被插進了c數組裡原本c[2]的位置,item作用於被移除元素的原數組
}
</script>

string.split( separator,limit )----字元串
　　split可以把這個string分割成片段來創建一個字元串數組.可選參數limit可以限制被分割的片段數量.separator可以是一個字元串或一個正則表達式.如果separator是一個空字元,會返回一個單字元的數組。
　　split依照separator ,來尋找原字元串中的是否包含separator,以separator作為分隔符來分割字元串變為數組元素,字元串中作為separator的字元會消失。　　
　　一旦使用了split,返回的對象會自動變為一個數組。
　　假如在原字元串中搜索不到separator,就會返回包含一整個字元串做一個元素的數組。

　　當separator是一個空格時：" ",就會把一個句子分成一個個單詞。