游標

説明 用 CSS 刻出游標樣式 抓取滑鼠位置 游標的位置隨著滑鼠移動而改變 範例 #cross #cross position: absolute &:before,&:after content: “” display: block width: 60px height: 15px background-color: #fff position: absolute left: 50% top: 50% transform: translate(-50%,-50%) rotate(45deg) &:after transform: translate(-50%,-50%) rotate(-45deg) window.addEventListener(“mousemove”, function(evt){ var x=evt.pageX; var y=evt.pageY; cross.style.left=x+”px”; cross.style.top=y+”px”; }) Display CODEPEN

splice() 陣列項目刪除

説明 刪除或增添陣列項目 範例 刪除項 陣列.splice(編號,刪除幾項) 【例】arr.splice(1, 1) →從 arr[1] 開始刪除1項 →刪掉 arr[1] const fruits = [‘Banana’, ‘Orange’, ‘Lemon’, ‘Apple’, ‘Mango’]; fruits.splice(1, 1)//從fruits[1]開始,刪掉1項。 console.log(fruits);//[“Banana”, “Lemon”, “Apple”, “Mango”] 增添項 const fruits = [‘Banana’, ‘Orange’, ‘Lemon’, ‘Apple’, ‘Mango’]; fruits.splice(1, 1, “Melon”)//從fruits[1]開始,刪掉1項,插入“Moko” console.log(fruits);//[“Banana”, “Melon”, “Lemon”, “Apple”, “Mango”]  

slice() 保留部分陣列項目

定義 指定陣列編號範圍,返回一組新的陣列 【必須値】開始,結束 ※返回的値不會包含結束的編號,但會包含開始的那個編號 範例 const fruits = [‘Banana’, ‘Orange’, ‘Lemon’, ‘Apple’, ‘Mango’]; const sl=fruits.slice(0, 2); //return//fruits[0], fruits[1]; console.log(sl);//[“Banana”, “Orange”] 【省略結束値】回報至最末項 const fruits = [‘Banana’, ‘Orange’, ‘Lemon’, ‘Apple’, ‘Mango’]; const sl=fruits.slice(2); //等於fruits.slice(2, fruits.length); //return fruits[2], fruits[3], fruits[4] console.log(sl);//[“Lemon”, “Apple”, “Mango”] 擷取多範圍 fruits共有5項資料。 保留【第1項】【第3~5項】。 多條件要用中括號[]包起來。 條件之間用逗號, 連結。 並且加上spread operator轉換成array形式。 const fruits = [‘Banana’, ‘Orange’, ‘Lemon’, ‘Apple’, […]