Enseñarle paso a paso cómo crear una página estática de [Teclado estéreo] arrastrando y soltando desde una página en blanco, sin escribir una línea de código CSS a mano, y completar la lógica interactiva de [Práctica de mecanografía a ciegas] con solo 10 líneas. de expresiones a lo largo del proceso.
Todo el proceso se realiza en la plataforma de aplicaciones ZhongTouch, que es rápida e intuitiva.
Representación final de la interfaz de usuario
La imagen del efecto es Win + Shift + Suna captura de pantalla con teclas de acceso directo, por lo que las teclas Meta y Shift se presionan y resaltan.
Representación interactiva
Práctica gratuita de mecanografía con teclas y con toques
Representaciones de rotación tridimensional.
No puedo esperar, pruébelo usted mismo ahora: modo de edición de plataforma de aplicación de código bajo Zhongtouch
El siguiente artículo describe los puntos principales; vaya al video de Bilibili para ver la enseñanza paso a paso: [Curso Crowd Touch] Teclado tridimensional/práctica de mecanografía táctil_哔哩哔哩_bilibili
Preparar datos de diseño clave
Al observar el teclado, podemos encontrar fácilmente que está compuesto por 4 filas de teclas, y cada fila de teclas tiene un número diferente de teclas. Naturalmente, los abstraeremos en una matriz bidimensional.
Para lograr la interacción, es necesario capturar el código de la tecla presionada por el usuario, por lo que extraemos cada código de tecla como un elemento de matriz.
El código específico se puede log($event.code)imprimir.
Asigne una matriz bidimensional de todos los códigos clave a una variable $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"]
]Al mismo tiempo, el logotipo en el botón de impresión también debe mostrarse en la interfaz de usuario. Seleccionamos los botones cuyos logotipos y códigos no coinciden con mucha regularidad (las letras y los números son muy regulares), usamos objetos para hacer coincidir los logotipos y códigos de botones y asignarlos a variables $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": "►"
}Los componentes de datos anidados muestran matrices bidimensionales
Primero agregue un componente de datos (nombre de clase keyboard), vincúlelo $v.keyscomo fuente de datos; luego agregue un componente de datos (nombre de clase) row, use el elemento de datos proporcionado por el componente de datos externo $xcomo fuente de datos, que en realidad es una matriz de llaves.
Agregue otro div (nombre de clase dinámica ("key " + $x)) como contenedor para cada botón, agregue estilos comunes como sombras y esquinas redondeadas a través del diseñador visual, y agregue selectores a algunos botones especiales para cambiar su color y ancho.
Agregue un intervalo y agregue contenido de texto dinámico ($v.label[$x])para que $v.labelse muestren las claves coincidentes. Luego agregue || $x.replace("Key", "").replace("Digit", "")los números y también se muestran las letras.
resaltado al pasar el cursor
Mueva el mouse sobre los componentes de cada capa en el árbol de componentes y los elementos correspondientes se resaltarán, lo que indicará su correspondencia de representación.
Al pasar el cursor sobre el teclado, se resalta el borde de todo el teclado;
al pasar el cursor sobre la fila, se resalta cada fila de teclas;
al pasar el cursor sobre div, se resalta el borde de cada tecla;
al pasar el cursor sobre la extensión, se resaltan las palabras de cada tecla resaltado.
Lógica de evento de pulsación de botón
onKeyDownNecesitamos capturar eventos clave globalmente, así que agregue la siguiente lógica al evento en el nodo raíz :
$v.key = $("." + $event.code)
stopIf(!$v.key)
$v.key.addClass("active")Primero, de acuerdo con el código de clave ($event.code) en el evento, seleccione si existe un elemento con este código como nombre de clase, si no se encuentra, significa que la tecla presionada por el usuario no está en este teclado virtual (la tecla de función en la primera fila del teclado real), luego deje de ejecutarse (stopIf), si lo encuentra, agregue acitveuna clase a este elemento. En este punto necesitamos agregar un selector .key.activey agregar el estilo cuando se presiona el botón en el diseñador visual (desplazamiento de presión, luz de fondo, sombra del botón)
Botón de lógica de eventos
Cuando aparece el botón, la clase activa agregada anteriormente debe eliminarse para restaurar el estado normal, así que onKeyUpagregue la siguiente lógica al evento en el nodo raíz:
$("." + $event.code).removeClass("active")lógica táctil
La lógica de mecanografía se ejecutará en dos situaciones: una es cuando el usuario marca la casilla de verificación [Práctica de mecanografía a ciegas] y la otra es cuando el usuario presiona el botón que desea presionar.
La lógica de la mecanografía táctil es seleccionar aleatoriamente un botón de todos los botones, agregarle selecteduna clase y esperar a que el usuario presione el botón. Si el botón presionado por el usuario resulta ser este botón, continúe generando un botón aleatorio. botón, etc.
onReadyFusione la matriz bidimensional de teclados en una matriz unidimensional y $v.allluego elimine Fndos MetaLeftteclas especiales:
$v.all = $v.keys.reduce('$acc.concat($x)', [])
$v.all.splice($v.all.indexOf("Fn"), 1)
$v.all.splice($v.all.indexOf("MetaLeft"), 1)Agregue $exp.盲打expresiones locales:
stopIf(!$f.x.盲打)
$v.selected = $v.all[$w.Math.floor($w.Math.random() * $v.all.length)]
$("." + $v.selected).addClass("selected")Si [Práctica de escritura a ciegas] no está marcada, se detendrá y continuará ejecutándose; $v.allgenerará números aleatorios de todas las claves y agregará selectedclases.
Convierta la expresión en una función (func) y asígnela a una variable $v.盲打:
$v.盲打 = func($exp.盲打)Esta función comienza a ejecutarse cuando el usuario marca:
$v.盲打()Continúe agregando la siguiente lógica al onKeyDownevento anterior:
stopIf(!$v.key.classList.contains("selected"))
$v.key.removeClass("selected")
$v.盲打()Si el nombre de clase de la tecla presionada por el usuario contiene selectedel nombre de la clase, significa que la tecla se presionó correctamente, elimine este tipo de nombre y continúe ejecutando la función de mecanografía; de lo contrario, significa que la tecla es incorrecta y ignórelo (stopIf).
Para obtener más videos de enseñanza, vaya al espacio Bilibili: el espacio personal de la plataforma de aplicaciones Zhongtouch_哔哩哔哩_Bilibili , que no solo tiene varias demostraciones y explicaciones de casos de visualización frontal, sino también múltiples casos de aplicaciones de sitios web completamente funcionales. Demostración y explicación del proceso de desarrollo.