CSS コードを 1 行も手書きせずに、空白のページからドラッグ アンド ドロップで [ステレオ キーボード] の固定ページを作成し、わずか 10 行で [ブラインド タイピング練習] の対話型ロジックを完成させる方法を段階的に説明します。プロセス全体を通しての表現。
プロセス全体は、高速かつ直感的な ZhongTouch アプリケーション プラットフォーム上で実行されます。
最終的な UI レンダリング
エフェクトの画像はWin + Shift + Sショートカット キーを使用したスクリーンショットなので、Meta キーと Shift キーが押されて強調表示されています。
インタラクティブなレンダリング
無料のキータイピングとタッチタイピングの練習
3次元回転レンダリング
待ちきれません。今すぐ試してみてください: Zhongtouch ローコード アプリケーション プラットフォーム編集モード
次の記事で要点を説明しています。ステップバイステップの指導については、Bilibili ビデオに移動してください: [クラウドタッチコース] 3 次元キーボード/タッチ タイピング練習_哔哩哔哩_bilibili
キー配列データを用意する
キーボードを観察すると、4 列のキーで構成されており、各列のキーの数が異なることが簡単にわかります。当然、それらを 2 次元配列に抽象化します。
インタラクションを実現するには、ユーザーが押したキーのコード(コード)を取得する必要があるため、各キーコードを配列項目として抽出します。
特定のコードをlog($event.code)印刷することができます。
すべてのキー コードの 2 次元配列を変数に代入します$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": "►"
}ネストされたデータコンポーネントは 2 次元配列を表示します
まずデータ コンポーネント (クラス名keyboard) を追加し、それを$v.keysデータ ソースとしてバインドします。次に、その中にデータ コンポーネント (クラス名) を追加しrow、外部のデータ コンポーネントによって提供されるデータ項目を$xデータ ソースとして使用します。これは実際には次の配列です。キー。各ボタンのコンテナとして別の div (動的クラス名) を追加し、ビジュアル デザイナーを通じて影や丸い角などの一般的なスタイルを追加し、いくつかの特別なボタンにセレクターを追加して色と幅を変更します
。スパンを追加し、それにダイナミック テキスト コンテンツを追加すると、その中の一致するキーが表示されます。次に、数字を追加すると文字も表示されます。("key " + $x)($v.label[$x])$v.label|| $x.replace("Key", "").replace("Digit", "")
ホバーハイライト
コンポーネント ツリー内の各レイヤーのコンポーネント上にマウスを移動すると、対応する要素が強調表示され、それらのレンダリングの対応が示されます。
キーボードにカーソルを置くと、キーボード全体の境界線が強調表示されます。
行にカーソルを置くと、
キーの各行が強調表示されます。div にカーソルを置くと、各キーの境界が強調表示されます。span
にカーソルを置くと、各キー上の単語が強調表示されます。強調表示されました。
ボタン押下イベントロジック
主要なイベントをグローバルにキャプチャする必要があるため、ルート ノードのonKeyDownイベントに次のロジックを追加します。
$v.key = $("." + $event.code)
stopIf(!$v.key)
$v.key.addClass("active")まず、イベント内のキーコード($event.code)に基づいて、このコードをクラス名とする要素が存在するかどうかを選択し、存在しない場合は、ユーザーが押したキーがこの上にないことを意味します仮想キーボード (実際のキーボードの最初の行にあるファンクション キー)、次に実行を停止 (stopIf)、見つかった場合は、acitveこの要素にクラスを追加します。この時点で、セレクターを追加し.key.active、ビジュアルデザイナーでボタンが押されたときのスタイルを追加する必要があります（プレスディスプレイスメント、バックライト、ボタンの影）。
ボタンアップイベントロジック
ボタンがポップアップしたら、上で追加したアクティブ クラスを削除して通常の状態に戻す必要があるため、onKeyUpルート ノードのイベントに次のロジックを追加します。
$("." + $event.code).removeClass("active")タッチロジック
タッチタイピングロジックは、ユーザーが[ブラインドタイピング練習]チェックボックスにチェックを入れたときと、ユーザーが押したいボタンを押したときの2つの状況で実行されます。
タッチ タイピングのロジックは、すべてのボタンからランダムにボタンを選択し、それにselectedクラスを追加し、ユーザーがボタンを押すのを待ちます。ユーザーが押したボタンがたまたまこのボタンだった場合、ランダムなボタンを生成し続けます。ボタンなど。
onReadyキーボードの 2 次元配列を 1 次元配列にマージし、$v.all次に 2 つの特殊キーを削除し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)。
さらに多くの教育ビデオについては、Bilibili スペースにアクセスしてください。Zhongtouchアプリケーション プラットフォームのパーソナル スペース_哔哩哔哩_Bilibili には、さまざまなフロントエンド視覚化ケースのデモンストレーションと説明だけでなく、複数の完全に機能する Web サイト アプリケーション ケースもあります。開発プロセスのデモンストレーションと説明。