この記事の例では、Webメッセージボードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1. タイトルバーとコンテンツバー、送信ボタン、メッセージボードを描く 気分:<br/> <input type="text" id="mood"/><br/> 注: <br/> <textarea id="network"></textarea><br/> <button id="send">公開</button> <div class="ban"></div> 2. 上記の要素を動的に取得します。 var mood = document.getElementById ("mood"); var ネットワーク = document.getElementById ("ネットワーク"); var send = document.getElementById ("send"); var ban = document.querySelector (".ban"); 3. 送信ボタンのクリック イベントを設定します。送信ボタンをクリックすると、下部のメッセージ ボードに入力されたコンテンツが表示されます。 (1) キャッシュ localStorage() の使い方を習得し、時間を利用してキャッシュされた値を取得します。 var time = 新しい Date(); (2)タイトルとコンテンツの値を格納するJSONオブジェクトを作成する var shuju={ 私の気分:気分の値、 mynetwork:ネットワーク .値、 now_time:time.toLocaleString() //2019/7/2 午後7:42:15 }; (3)値をJSONオブジェクトに保存し、JSON.stringifyを使用して文字列に変換することを忘れないでください。 (4)値を読み取り、キャッシュ内の内容を取得し、メッセージボードインターフェースに表示する関数を作成します。 関数readdata(){ ban.innerHTML = ""; var 長さ = localStorage.length - 1; for(var i=長さ;i>=0;i--){ var k=localStorage.key(i); // キー値を取得 var data=JSON.parse (localStorage.getItem(k)); // コンソールログ(k); ban.innerHTML +=data.mymood +" "+data.mynetwork +" "+ data.now_time +"<br/>"; } } ソースコード: <!DOCTYPE html> <html> <head lang="ja"> <メタ文字セット="UTF-8"> <タイトル></タイトル> <スタイル> 。禁止{ 幅:500ピクセル; 高さ:自動; border:1px 黒一色; } #送信 { 幅:40px; 高さ:25px; フォントサイズ: 12px; テキスト配置: 中央; 行の高さ: 25px; 背景:淡いターコイズ色; } </スタイル> </head> <本文> 気分:<br/> <input type="text" id="mood"/><br/> 注: <br/> <textarea id="network"></textarea><br/> <button id="send">公開</button> <div class="ban"></div> <スクリプト> var mood = document.getElementById ("mood"); var ネットワーク = document.getElementById ("ネットワーク"); var send = document.getElementById ("send"); var ban = document.querySelector (".ban"); //localStorage.clear(); データを読み込む(); send.onclick = 関数(){ var time = 新しい Date(); var shuju={ 私の気分:気分の値、 mynetwork:ネットワーク .値、 now_time:time.toLocaleString() //2019/7/2 午後7:42:15 }; // console.log(JSON.stringify (shuju)); localStorage.setItem(time.getTime(),JSON.stringify(shuju)); 気分.値=""; ネットワーク値 = ""; // alert("正常に公開されました"); データを読み込む(); } 関数readdata(){ ban.innerHTML = ""; var 長さ = localStorage.length - 1; for(var i=長さ;i>=0;i--){ var k=localStorage.key(i); // キー値を取得 var data=JSON.parse (localStorage.getItem(k)); // コンソールログ(k); ban.innerHTML +=data.mymood +" "+data.mynetwork +" "+ data.now_time +"<br/>"; } } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Tomcat をアンインストールして再インストールする方法 (画像とテキスト付き)
目次1. はじめに2. 直接回復2.1 mysqldumpバックアップの完全リカバリ2.2 xtra...
目次1. beforeCreate & created 2. マウント前とマウント済み3. ...
解決: <head> に次のコードを追加します。コードをコピーコードは次のとおりです。 ...
レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...
目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...
01. コマンドの概要gcc コマンドは、GNU がリリースした C/C++ ベースのコンパイラを使...
目次序文プロジェクト設計後部フロントエンドプロジェクトを実行する質疑応答序文これまでの API 開発...
序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...
前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...
目次I. 概要2. pt-archiverの主なパラメータ3. mysql_archiverのインス...
さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...
目次概要コードの実装要約する概要戦略パターンは、JavaScript デザイン パターンにおける動作...
ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...
目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...
MySQL ページング クエリは通常、制限を通じて実装されます。 limit は 1 つまたは 2 ...