手把手教你從空白頁面開始通過拖拉拽可視化的方式制作【立體鍵盤】的靜態頁面，不用手寫一行CSS代碼，全程只用10來行運算式就完成了【盲打練習】的互動邏輯，
整個程序在眾觸應用平臺進行，快速直觀，
最終UI效果圖
效果圖是用Win + Shift + S快捷鍵截的屏，所以Meta和Shift鍵處于按下的高亮狀態
互動效果圖
自由按鍵 vs 盲打練習
立體旋轉效果圖
等不及了，馬上親自動手試一試：https://keyboard.zc-app.cn/z
下面的文章描述的是重點要點，手把手的教學請移步嗶哩嗶哩視頻：https://www.bilibili.com/video/BV16T411377x
準備按鍵布局資料
通過觀察鍵盤我們很容易發現它是由4排按鍵組成的，每排按鍵又有不同數目的按鍵，很自然我們會把它們抽象出一個二維陣列，
為了實作互動，需要捕捉被用戶按下按鍵的編碼（code），所以我們就把每個按鍵編碼提取出來作為陣列項，
具體的編碼可以通過log($event.code)列印出來，
把所有按鍵編碼的二維陣列賦給變數$v.keys：
[
["Backquote", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace", "Home"],
["Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight", "Backslash", "End"],
["CapsLock", "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter", "PageUp"],
["ShiftLeft", "KeyZ", "KeyX", "KeyC", "KeyV", "KeyB", "KeyN", "KeyM", "Comma", "Period", "Slash", "ShiftRight", "ArrowUp", "PageDown"],
["ControlLeft", "Fn", "MetaLeft", "AltLeft", "Space", "AltRight", "ControlRight", "ArrowLeft", "ArrowDown", "ArrowRight"]
]
同時在UI上也要顯示列印按鈕上的標識，我們把標識和編碼對于匹配規律性不強的按鈕挑出來（字母、數字很有規律），用物件把標識和按鈕編碼匹配起來，賦給變數$v.label：
{ "Backquote": "`", "Minus": "-", "Equal": "=", "BracketLeft": "[", "BracketRight": "]", "Backslash": "\\\\", "Semicolon": ";", "Quote": "\'", "PageUp": "PgUp", "ShiftLeft": "Shift", "Comma": ",", "Period": ".", "Slash": "/", "ShiftRight": "Shift", "ArrowUp": "▲", "PageDown": "PgDn", "ControlLeft": "Ctrl", "MetaLeft": "Meta", "AltLeft": "Alt", "AltRight": "Alt", "ControlRight": "Ctrl", "ArrowLeft": "?", "ArrowDown": "▼", "ArrowRight": "?" }
嵌套資料組件展示二維陣列
先添加一個資料組件（類名keyboard），系結$v.keys作為資料源；再在它里面添加一個資料組件（類名row），用外層資料組件提供的資料項$x作為資料源，它其實是某排按鍵陣列，
再添加一個div（動態類名("key " + $x)）作為每個按鍵的容器，并通過可視化設計器添加陰影和圓角等共通樣式，給部分特殊按鍵添加選擇器以更改其顏色和寬度，
添加一個span，給它添加動態文本內容($v.label[$x])，這樣在$v.label里有匹配的按鍵就顯示出來了， 再添加|| $x.replace("Key", "").replace("Digit", "")那數字和字母也顯示出來了，
hover高亮
滑鼠移到組件樹的各層組件上，對應的元素就會高亮顯示，提示它（們）渲染的對應關系，
hover到keyboard時整個鍵盤的邊框高亮；
hover到row時每排按鍵高亮；
hover到div時每個按鍵的邊框高亮；
hover到span時每個按鍵上的字高亮，
按鍵按下事件邏輯
我們需要全域捕捉按鍵事件，所以在根節點上的onKeyDown事件上添加如下邏輯：
$v.key = $("." + $event.code)
stopIf(!$v.key)
$v.key.addClass("active")先根據事件中的按鍵編碼（$event.code）選擇有沒有以此編碼為類名的元素，如果沒找到說明用戶按下的鍵不在此虛擬鍵盤上（真實鍵盤第一排的功能鍵），則停止往下運行（stopIf），如果找到了則給此元素添加acitve類，此時我們要添加選擇器.key.active，并在可視化設計器添加按鍵處于按下狀態時的樣式（按鍵的按下位移、背光、陰影）
按鍵彈起事件邏輯
按鍵彈起的時候就應該去掉上面添加的active類以恢復常態，所以在根節點上的onKeyUp事件上添加如下邏輯：
$("." + $event.code).removeClass("active")
盲打邏輯
盲打邏輯會在兩種情況下執行：一是用戶在【盲打練習】勾勾上打勾時，二是用戶按中待按按鍵時，
盲打的邏輯是從所有按鍵中隨機選擇一個按鍵，給它添加selected類，等待用戶按鍵，如果用戶按下的按鍵剛好是此鍵則繼續產生一個隨機按鍵，如此往復，
在onReady中把鍵盤二維陣列合并成一維陣列$v.all，再去除Fn和MetaLeft兩個特殊按鍵：
$v.all = $v.keys.reduce('$acc.concat($x)', [])
$v.all.splice($v.all.indexOf("Fn"), 1)
$v.all.splice($v.all.indexOf("MetaLeft"), 1)
添加$exp.盲打區域運算式：
stopIf(!$f.x.盲打) $v.selected = $v.all[$w.Math.floor($w.Math.random() * $v.all.length)] $("." + $v.selected).addClass("selected")
如果【盲打練習】勾勾未勾上則停止繼續運行；從所有按鍵$v.all中，產生亂數，并添加selected類，
把運算式轉換成函式（func）并賦給變數$v.盲打：
$v.盲打 = func($exp.盲打)
用戶打勾時開始執行此函式：
$v.盲打()
在上面的onKeyDown事件上繼續添加如下邏輯：
stopIf(!$v.key.classList.contains("selected"))
$v.key.removeClass("selected")
$v.盲打()
如果用戶按下的按鍵類名中包含selected類名，說明按對了，移除此類名，繼續執行盲打函式，否則說明打錯了，不予理會（stopIf），
更多教學視頻請移步嗶哩嗶哩空間：https://space.bilibili.com/475645807，里面不僅有各種前端可視化案例演示和講解，還有多個完整功能的網站應用案例的開發程序演示和講解，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499367.html
標籤：JavaScript
上一篇：白色卡片陰影效果