ネイティブ JavaScript メッセージボード

この記事では、参考までにメッセージボードを実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。

効果：

コード：

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="UTF-8">
 <タイトル></タイトル>
 <スタイル>
 #txt2{
 幅:400ピクセル;
 高さ:50px;
 上マージン:5px;
 }
 #span1{
 左マージン:200px;
 }
 ＃箱{
 幅:400ピクセル;
 /*高さ:400px;*/
 /*境界線:1px 灰色;*/
 }
 #ボックス .item{
 高さ:80px;
 border-bottom:破線 1px ライトグレー
 }
 #ボックス .c1{
 高さ:30px;
 }
 #ボックス .c1 スパン{
 フロート:左;
 }
 #ボックス .c1 a{
 フロート:右;
 右マージン:20px;
 テキスト装飾: なし;
 色：黒;
 }
 
 </スタイル>
 </head>
 <本文>
 <div>
 何か言って...
 </div>
 <div>
 <input type="text" placeholder="洪気功" id="txt1"/>
 </div>
 <div>
 <テキストエリア名="" id="txt2" 最大長="10"></テキストエリア>
 </div>
 <div id="div3">
 <span id="span1">10</span> 文字を入力することもできます</span>
 <input type="button" value = "公開" id="btn"/>
 </div>
 <div>
 <div>みんなが話している</div>
 </div>
 <div id="ボックス">
 <div クラス = "item">
 <divクラス= "c1">
  <span>喬峰:</span>
  <span>今日............</span>
  <a href = "#">削除</a>
 </div>
 <div>01 1月4日 01:28</div>
 </div>
 <div クラス = "item">
 <divクラス= "c1">
  <span>喬峰:</span>
  <span>今日............</span>
  <a href = "#">削除</a>
 </div>
 <div>01 1月4日 01:28</div>
 </div>
 </div>
 </本文>
 <script type="text/javascript">
 //ボタンを取得します var btn = document.getElementById("btn");
 var box = document.getElementById("box");
 var txt1 = document.getElementById("txt1");
 var txt2 = document.getElementById("txt2");
 
 btn.onclick = 関数（）{
 //コンソールログ(これ);
 var divItem = document.createElement("div");
 divItem.className = "アイテム";
 //box.appendChild(divItem);//ノードを追加box.insertBefore(divItem, box.firstChild);//ノードを挿入var div1 = document.createElement("div");
 div1.クラス名 = "c1";
 var div2 = document.createElement("div");
 divItem.appendChild(div1);
 divItem.appendChild(div2);
 
 //最初の div のコンテンツを設定します。var span1 = document.createElement("span");
 div1.appendChild(span1);
 span1.innerHTML = txt1.value + " : ";
 
 var span2 = document.createElement("span");
 div1.appendChild(span2);
 span2.innerHTML = txt2.値;
 
 var a = document.createElement("a");
 .href = "#";
 a.innerHTML = "削除";
 div1.appendChild(a);
 //aの削除イベント a.onclick = function () {
  親ノードを削除します。
 }
 
 var date = 新しい Date();
 //var str = date.toLocaleString();
 var m = date.getMonth() + 1;
 var d = date.getDate();
 var h = date.getHours();
 var m2 = date.getMinutes();
 m = fun1(m);
 d = fun1(d);
 h = fun1(h);
 m2 = fun1(m2);
 
 var str = m + "月" + d + "日" + h + ":" + m2;
 
 div2.innerHTML を str に挿入します。
 
 }
 
 //日付フォーマット関数をカプセル化する function fun1(x) {
 (x < 10) の場合 {
  "0" + x を返します。
 }
 x を返します。
 }
 
 var span2 = document.getElementById("span2");
 txt2.onkeyup = 関数（）{
 var str = this.value;
 console.log(str.length);
 span2.innerHTML = 10 - str.length;
 }
 


 </スクリプト>
</html>

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

以下もご興味があるかもしれません: