iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

JavaScript 從零開始系列 第 36

JavaScript 從零開始 - Day36 - KeyCode事件

JavaScript Note

keyCode 事件很多會用來做遊戲或是網頁互動的功能,很有意思的語法。

本次主題

使用鍵盤數字 1, 2, 3 使元素向上飛出螢幕外。

先來寫結構,有三個元素,程式碼如下:

HTML

<div class="group">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

  • 有三個元素,有一些是共同項目,所以就用 .box 寫在一起,當中為了要讓球飛出去,使用 transition 的特性做動畫,其中速率調整有一個貝茲曲線的語法,可以透過 F12 開發人員工具,去調整喜歡的數值。
  • 因為是使用整個瀏覽器,所以只要在 .box 中直接寫上 position: absolute; 絕對定位在 body 中,並且 bottom:0; 使初始狀態在螢幕最底下。
  • 分別把三個 .box1, .box2, .box3 靠左間距各差 200px,這個是邊調整邊看螢幕的距離,可以自己調整成喜歡的距離。

CSS

.box {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transition: all 3s cubic-bezier(1, -0.01, 0, 0.99);
  /* 貝茲曲線 */
}

.box1 {
  left: 30px;
  background-color: #d2ff55;
}

.box2 {
  left: 230px;
  background-color: orange;
}

.box3 {
  left: 430px;
  background-color: red;
}

再來寫互動,先選取到 body,原因是 body 內互動

var body = document.body; //指整個瀏覽器

在 body 中新增一個監聽事件,屬性為 keydown,也就是要用按下鍵盤的行為。

body.addEventListener("keydown", boxFly, false);
//在瀏覽器新增監聽事件,使用 keydown 的語法,function 名稱為 boxFly。

函式名稱為 boxFly,便在下方建立一個函式,並來確認一下按鍵的編號。

function boxFly(e) {
  console.log(e.keyCode); //確認鍵盤的編號
}

透過 console.log 查詢後可以得到鍵盤編號,為了符合筆電跟桌電鍵盤都可以使用,項目較多,可以使用 switch,作為物件的選擇,希望在按下按鍵後才啟動行為,所以每一個 case 後面都加上 break,避免按一下就全部啟動了。

switch (
  e.keyCode //因為項目多,可使用 switch
) {
  case 49: //上排數字鍵盤 1
    document.querySelector(".box1").style.bottom = "5000px";
    //選擇 .box1 當中的 CSS 裡面的 bottom 設定值動態改成 5000px
    break; //跑完後就不再跑
  case 50: //上排數字鍵盤 2
    document.querySelector(".box2").style.bottom = "5000px";
    break;
  case 51: //上排數字鍵盤 3
    document.querySelector(".box3").style.bottom = "5000px";
    break;
  case 97: //數字鍵盤 1
    document.querySelector(".box1").style.bottom = "5000px";
    break; //跑完後就不再跑
  case 98: //數字鍵盤 2
    document.querySelector(".box2").style.bottom = "5000px";
    break;
  case 99: //數字鍵盤 3
    document.querySelector(".box3").style.bottom = "5000px";
    break;
}

JavaScript

完整程式碼:

var body = document.body; //指整個瀏覽器

body.addEventListener("keydown", boxFly, false);
//在瀏覽器新增監聽事件,使用 keydown 的語法,function 名稱為 boxFly。

function boxFly(e) {
  console.log(e.keyCode); //確認鍵盤的編號
  switch (
    e.keyCode //因為項目多,可使用 switch
  ) {
    case 49: //上排數字鍵盤 1
      document.querySelector(".box1").style.bottom = "5000px";
      //選擇 .box1 當中的 CSS 裡面的 bottom 設定值動態改成 5000px
      break; //跑完後就不再跑
    case 50: //上排數字鍵盤 2
      document.querySelector(".box2").style.bottom = "5000px";
      break;
    case 51: //上排數字鍵盤 3
      document.querySelector(".box3").style.bottom = "5000px";
      break;
    case 97: //數字鍵盤 1
      document.querySelector(".box1").style.bottom = "5000px";
      break; //跑完後就不再跑
    case 98: //數字鍵盤 2
      document.querySelector(".box2").style.bottom = "5000px";
      break;
    case 99: //數字鍵盤 3
      document.querySelector(".box3").style.bottom = "5000px";
      break;
  }
}

來 CodePen 玩一下: https://codepen.io/hnzxewqw/full/oNXZROM

同場加映,從左到右的效果: https://codepen.io/hnzxewqw/pen/KKpWjby


上一篇
JavaScript 從零開始 - Day35 - Change 事件
下一篇
JavaScript 從零開始 - Day37 - blur 離開焦點
系列文
JavaScript 從零開始40

尚未有邦友留言

立即登入留言