この記事では、参考までに、簡単な英中辞典を実装するためのjsの具体的なコードを紹介します。具体的な内容は次のとおりです。 1. 目的jsを使用して、単純な英語-中国語辞書クエリ機能を実装し、単語検索の効果を実現します。 2. 実装手順1. jsファイルを使用して、英語-中国語辞書のすべての単語を文字列形式で保存します。 2. 別のjsファイルまたはhtmlページスクリプトで、語彙を含むファイルの文字列を配列に分割し、Mapメソッドを追加して、それを走査します。 3. 検索ボックスの内容と配列要素を照合し、結果を返します。 3. コードモジュール1.html部分 <div id="div1"> <input id='word' type="text" placeholder="英語の単語を入力" /> <div id='desc'></div> </div> 2.css部分 #div1 { 幅: 200ピクセル; 高さ: 200px; パディング: 50px; 背景色: ライトグレー; 境界線: 1px 黒一色; マージン: 100px 自動 } #言葉 { 幅: 200ピクセル; 高さ: 30px; フォントサイズ: 18px; } #説明 { 幅: 200ピクセル; 高さ: 150px; 上マージン: 20px; 背景色: 薄緑 } 3.js部分 <script src='demo.js'></script> <スクリプト> // 文字列を改行で配列に分割します。let arr = word.split("\n"); // Map メソッドを作成します。let map = new Map(); // 配列を走査する for (var i = 0; i < arr.length - 1; i += 2) { map.set(arr[i].substring(1), arr[i + 1].substring(6)); } window.onload = 関数(){ oWord = document.getElementById("word"); とします。 oDesc = document.getElementById("desc"); とします。 oWord.onkeyup = 関数(){ 値を map.get(this.value); とします。 if (値) { oDesc.innerHTML = 値; } それ以外 { oDesc.innerHTML = "そのような単語は見つかりません"; } } } </スクリプト> 4.js 外部リンク語彙文字列フラグメントのスクリーンショット 4. レンダリング以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: デカルト積原理を使用してMySQLで複数のテーブルをクエリする方法を簡単に説明します。
>>: CentOS 8 に MariaDB をインストールするための詳細なチュートリアル
目次rc.local メソッドchkconfig メソッドrc.local メソッド1 まず自動的に...
まず質問させてください。HTML ページを作成するときに、外部から JS ファイルをインポートする場...
Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...
フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...
1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...
まずdockerコンテナを実行しますルートユーザーとしてコマンドを実行する sudo docker ...
実際のプロジェクトでは、上下のスクロール バーと左右のスクロール バーは DIV 内にないため、右の...
1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...
目次1. 父から息子へ2. 息子から父へ3. ブラザーコンポーネント通信(バス) 4. ref/re...
nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...
日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...
1. CSSナビゲーションバー(1)ナビゲーションバーの機能ナビゲーション バーを使いこなすことは、...
シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...
Web ページを作成するときに、特定のフォントを使用したい場合は、 @font-faceを介して参照...
mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...