在JS中如何實現留言板功能-js教程-PHP中文網

首頁

web前端

js教程

在JS中如何實現留言板功能

亚连

Jun 14, 2018 pm 06:03 PM

js留言板

我最近在基於js實作留言板功能，實現的功能有發佈人和發佈內容做非空校驗，樓層效果展示和發佈時間展示。具體實例程式碼大家參考下本文

功能實作：

1.發佈人與發佈內容非空校驗
2.編輯刪除功能
3.樓層效果展示
4.發佈時間展示

效果圖

在JS中如何實現留言板功能 #

在JS中如何實現留言板功能

#tools.js

時間工具包

function getTime(){
  var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth()+1;
  var da = date.getDate();
  var hour = date.getHours()<10 ? "0"+date.getHours() : date.getHours() ;
  var minute = date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes() ;
  var second = date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds() ;
  var week = date.getDay();
  var time = year+"年"+month+"月"+da+"日 "+hour+":"+minute+":"+second +" "+weeks[week];
  return time;
}

#留言板.html

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="tools.js"></script>
    <style>
      #box {
        width: 800px;
        margin: 0 auto;
      }
      textarea {
        width: 800px;
      }
      #li {
        display: block;
        border-bottom: 1px dashed #ebebeb;
        margin: 10px 0;
        padding: 8px 0;
      }
    </style>
  </head>
  <body>
    <p id="box">
      <h3 id="留言板-nbsp">留言板 </h3>
      发布人：<input type="text" id="person" value="">
      共<input style="border: 0;" name="" id="louceng">
      <textarea name="" id="text" rows="10"></textarea>
      <input type="button" value="确认发布" id="btn" />
      <h3 id="全部留言">全部留言</h3>
      <hr/>
    </p>
    <script>
      var num = 0;
      var num1 = 0;
      var box = document.getElementById("box");
      var text = document.getElementById("text");
      var btn = document.getElementById("btn");
      var person = document.getElementById("person");
      var ul = document.createElement("ul");
      ul.id = "ul1";
      var time = document.createElement("p");
      document.getElementById("louceng").value=num+"楼";
      btn.onclick = function() {
        //非空判断
        if(person.value==""||person.value==null){
          alert("发布人不允许为空！");
          return false;
        }
        if(text.value==""||text.value==null){
          alert("内容不允许为空！");
          return false;
        }
        //获取时间
        num = num+1;
        var datetime = getTime();
        time = document.createTextNode("发布时间：" + datetime);
        var li = document.createElement("li");
        li.id = "li";
        //创建删除功能
        var oA = document.createElement("a");
        var oAtext = document.createTextNode("删除");
        oA.href = "#";
        oA.appendChild(oAtext);
        //创建发布文本框
        var fabu = document.createElement("textarea");
        fabu.rows = "10";
        fabu.style = "margin: 0px; width: 760px; height: 138px;";
        fabu.value = text.value;
        fabu.disabled="disabled";
        //创建编辑功能
        var oB = document.createElement("a");
        var oBtext = document.createTextNode("编辑");
        oB.href = "#";
        oB.appendChild(oBtext);
        //创建确认按钮
        var butt = document.createElement("input");
        butt.type = "button";
        butt.value = "确认";
        butt.style.display = "none";
        //解决兼容问题
        var ali = ul.getElementsByTagName("li");
        if(ali.length == 0) {
          ul.appendChild(li);
        } else {
          ul.insertBefore(li, ali[0]);
        }
        //添加节点
        box.appendChild(ul);
        var lou = document.createTextNode("第"+num+"楼");
        var persons = document.createTextNode("发布人："+ person.value);
        document.getElementById("person").value="";
        var textnode = document.createTextNode("发布内容：");
        document.getElementById("text").value="";
        li.appendChild(lou);
        li.appendChild(document.createElement("br"));
        li.appendChild(persons);
        li.appendChild(document.createElement("br"));
        li.appendChild(textnode);
        li.appendChild(document.createElement("br"));
        li.appendChild(fabu);
        li.appendChild(time);
        li.appendChild(oA);
        li.appendChild(oB);
        li.appendChild(butt);
        //删除
        oA.onclick = function() {
          ul.removeChild(this.parentNode);
          //删除时更新
          num1++;//删除次数
          document.getElementById("louceng").value=num-num1+"楼";
        };
        //编辑
        oB.onclick = function() {
          fabu.disabled = "";
          butt.style.display = "block";
        }
        //确认更改
        butt.onclick = function() {
          fabu.disabled="disabled";
          butt.style.display = "none";
        }
        //楼层展示
        document.getElementById("louceng").value=num-num1+"楼";
      }
    </script>
  </body>
</html>

上面是我整理給大家的，希望今後對大家有幫助。

在Vue webpack中詳細講解基礎設定

在nodejs express環境中如何將建立多人聊天室

在nginx vue.js中如何實作前後端分離

使用vue2.0如何實作前端星星分數功能元件

在JS中屬性名稱加引號與不加引號的問題

#在JavaScript中如何判斷NaN

##################################################################################################################################################### #如何使用jQuery實作滑鼠響應式透明度漸層動畫效果######

以上是在JS中如何實現留言板功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr