游標

説明

  1. 用 CSS 刻出游標樣式
  2. 抓取滑鼠位置
  3. 游標的位置隨著滑鼠移動而改變

範例

#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', 'Mango'];

const sl=[
 ...fruits.slice(0, 1),
 ...fruits.slice(2)
];

console.log(sl);
//["Banana", "Lemon", "Apple", "Mango"]