原生JavaScript实现留言板

本文实例为大家分享了JavaScript实现留言板的具体代码，供大家参考，具体内容如下

效果：

代码：

!DOCTYPE htML>
    html>
     head>
     meta charset="UTF-8">
     tITle>
    /title>
     style>
 #txt2{
     width:400px;
     height:50px;
     margin-top:5px;
 }
 #span1{
     margin-left:200px;
 }
 #box{
     width:400px;
     /*height:400px;
    */ /*border:1px solid gray;
*/ }
 #box .item{
     height:80px;
 border-bottom:dashed 1px lightgrey }
 #box .c1{
     height:30px;
 }
 #box .c1 span{
     float:left;
 }
 #box .c1 a{
     float:right;
     margin-right:20px;
     text-decoration: none;
     color:black;
 }
      /style>
     /head>
     body>
     div>
     说点什么吗...... /div>
     div>
     input type="text" placeholder="洪七公" id="txt1"/>
     /div>
     div>
     textarea name="" id="txt2" maxlength="10">
    /textarea>
     /div>
     div id="div3">
     span id="span1">
    还能输入span id="span2">
    10/span>
    个字/span>
     input type="button" value = "发布" id="BTn"/>
     /div>
     div>
     div>
    大家在说/div>
     /div>
     div id="box">
     div class = "item">
     div class = "c1">
      span>
    乔峰：/span>
      span>
    今天............/span>
      a href = "#">
    删除/a>
     /div>
     div>
    01月04日 01：28/div>
     /div>
     div class = "item">
     div class = "c1">
      span>
    乔峰：/span>
      span>
    今天............/span>
      a href = "#">
    删除/a>
     /div>
     div>
    01月04日 01：28/div>
     /div>
     /div>
     /body>
     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 = function () {
     //console.LOG(this);
     var divItem = document.createElement("div");
     divItem.classname = "item";
     //box.appendChild(divItem);
    //追加节点 box.insertBefore(divItem, box.FirstChild);
    //插入节点  var div1 = document.createElement("div");
     div1.className = "c1";
     var div2 = document.createElement("div");
     divItem.appendChild(div1);
     divItem.appendChild(div2);
      //设置第1个div的内容 var span1 = document.createElement("span");
     div1.appendChild(span1);
     span1.innerHTML = txt1.value + " : ";
      var span2 = document.createElement("span");
     div1.appendChild(span2);
     span2.innerHTML = txt2.value;
      var a = document.createElement("a");
     a.href = "#";
     a.innerHTML = "删除";
     div1.appendChild(a);
 //a的删除事件 a.onclick = function () {
      this.parentNode.parentNode.remove();
 }
      var date = new 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) {
 if (x  10) {
      return "0" + x;
 }
     return x;
 }
      var span2 = document.getElementById("span2");
 txt2.onkeyup = function () {
     var str = this.value;
     console.log(str.length);
     span2.innerHTML = 10 - str.length;
 }
      /script>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JS实现留言板功能
• jsp留言板源代码三: 给jsp初学者.
• js使用DOM操作实现简单留言板的方法
• JS+CSS模拟可以无刷新显示内容的留言板实例
• JS实现留言板功能[楼层效果展示]
• js 实现的可折叠留言板(附源码下载)
• jsp留言板源代码二: 给jsp初学者.
• 本人ajax留言板的源程序 不错的应用js
• 用ReactJS和Python的Flask框架编写留言板的代码示例
• jsp留言板源代码一: 给jsp初学者.

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！