ウェブメッセージボード機能を実現する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();

（２）タイトルとコンテンツの値を格納する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>