この記事では、参考までに、簡単な英中辞典を実装するための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 をインストールするための詳細なチュートリアル
目次1. 索引1.1 コンセプト1.2 機能1.3 索引作成の原則1.3.1 ディスクアクセス回数を...
最近、Xiao Ming は新しい Mac を購入し、独自のブログ Web サイトを構築したいと考え...
a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...
序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...
MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...
<br />このタグを使用すると、画面上に水平線を表示して、ページのさまざまな部分を区切...
1. 対照的な色を使用します。ここでのコントラストとは、テキストの色と背景色のコントラストを指します...
この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有...
目次1. 概要1.1 厳密モードとは何ですか? 1.2 厳密モードの目的2. 厳密モードを有効にする...
実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...
目次概要例なぜそれが必要なのでしょうか?設定参照、反応的計算して見るライフサイクルVue3.0 は ...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
著者が MySQL を使用してユーザーを追加していたところ、ユーザー名が間違って記述されていることに...
通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...
目次環境条件エラーが発生しました回避策1. mysql dockerにログインする2. ルートパスワ...