ウェブメッセージボード機能を実現するjs

ウェブメッセージボード機能を実現するjs

この記事の例では、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 +" &nbsp;&nbsp;&nbsp;"+data.mynetwork +" &nbsp;&nbsp;&nbsp;"+ 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 +" &nbsp;&nbsp;&nbsp;"+data.mynetwork +" &nbsp;&nbsp;&nbsp;"+ data.now_time +"<br/>";
    }
}
</スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript イベント委任の原則
  • jsイベント委譲の詳細な説明
  • JS でのイベント委譲例の簡単な分析
  • Web メッセージボード機能を実装する JavaScript
  • メッセージボードのネイティブJS実装
  • この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。

<<:  JSは画像の滝の流れの効果を実現します

>>:  Tomcat をアンインストールして再インストールする方法 (画像とテキスト付き)

推薦する

MySQLデータ復旧のさまざまな方法の概要

目次1. はじめに2. 直接回復2.1 mysqldumpバックアップの完全リカバリ2.2 xtra...

この記事はVueのライフサイクルを理解するのに役立ちます

目次1. beforeCreate & created 2. マウント前とマウント済み3. ...

ページのキャッシュを防ぐソリューション

解決: <head> に次のコードを追加します。コードをコピーコードは次のとおりです。 ...

CSS フォーム検証機能の実装コード

レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...

MySQL Undo ログと Redo ログの概要

目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...

Linux gccコマンドの具体的な使い方

01. コマンドの概要gcc コマンドは、GNU がリリースした C/C++ ベースのコンパイラを使...

FastApi+Vue+LayUIを使用してフロントエンドとバックエンドを分離するサンプルコード

目次序文プロジェクト設計後部フロントエンドプロジェクトを実行する質疑応答序文これまでの API 開発...

MySQLアカウントのIP制限条件を変更する方法

序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...

MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法

前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...

MySQL データ アーカイブ ツール mysql_archiver の詳細な説明

目次I. 概要2. pt-archiverの主なパラメータ3. mysql_archiverのインス...

色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...

Javascriptで戦略パターンを実装する方法

目次概要コードの実装要約する概要戦略パターンは、JavaScript デザイン パターンにおける動作...

3つの簡単な例を使ってハイパーリンクの下線を削除する方法

ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...

Vue における v-for のキーの一意性の詳細な説明

目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...

MySQLのページング制限のパフォーマンス問題についての簡単な説明

MySQL ページング クエリは通常、制限を通じて実装されます。 limit は 1 つまたは 2 ...