基于JavaScript实现留言板功能

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

html代码

<div id="main" class="main">
  <ul id="content" class="content">
    <li class="msgContent left">hello?</li>
    <div style="clear: both;"></div>
    <li class="msgContent left">hello</li>
    <div style="clear: both;"></div>
    <li class="msgContent right">hi</li>
    <div style="clear: both;"></div>
    <li class="msgContent left">hehe</li>
    <div style="clear: both;"></div>
    <li class="msgContent left">goodbye</li>
    <div style="clear: both;"></div>
    <li class="msgContent right">。。。。</li>
    <div style="clear: both;"></div>
    <li class="msgContent right">I LOVE YOU</li>
  </ul>
  <textarea id="msg_input" class="msgInput"></textarea>
  <button id="sendbtn" class="sendbtn">发送</button>
</div>

css代码

* {
      font-size: 14px;
      padding: 0;
      margin: 0;
    }
 
    .main {
      position: relative;
      margin: 20px auto;
      border: 1px solid steelblue;
      width: 430px;
      height: 400px;
    }
 
    .msgInput {
      display: block;
      width: 406px;
      height: 60px;
      margin: 10px auto;
    }
 
    .sendbtn {
      position: absolute;
      width: 100px;
      height: 29px;
      bottom: 5px;
      right: 10px;
    }
 
    .content {
      list-style: none;
      width: 410px;
      height: 280px;
      margin: 5px auto;
      border: 1px dotted #D1D3D6;
      overflow-y: scroll;
    }
 
    .msgContent {
      width: auto;
      max-width: 250px;
      height: auto;
      word-break: break-all;
      margin: 5px;
      padding: 3px;
      border-radius: 5px;
    }
 
    .content .left {
      float: left;
      text-align: left;
      background-color: lightgrey;
    }
 
    .content .right {
      float: right;
      text-align: right;
      background-color: yellowgreen;
    }
 
    .clear {
      clear: both;
}

JS代码

var oBtn = document.getElementById("sendbtn");
  var msg = document.getElementById("msg_input");
  var oCon = document.getElementById("content");
  oBtn.onclick = function () {
    var msgVal = msg.value;
    var li = document.createElement("li");
    li.innerHTML = msgVal;
    li.className = "msgContent right";
    var div = document.createElement("div");
    div.className = "clear";
    oCon.appendChild(div);
    oCon.appendChild(li);
    msg.value = "";
    //可见范围看见当前元素
    li.scrollIntoView()
  };
  
  document.onkeypress = function (e) {
    var e = e || event;
    var code = e.keyCode || e.which;
    if (code == 10) {
      var msgVal = msg.value;
      var li = document.createElement("li");
      li.innerHTML = msgVal;
      li.className = "msgContent right";
      var div = document.createElement("div");
      div.className = "clear";
      oCon.appendChild(div);
      oCon.appendChild(li);
      msg.value = "";
      //可见范围看见当前元素
      li.scrollIntoView();
    }
}

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