快捷導航

基于JavaScript實現(xiàn)留言板功能

更新時間：2020年03月16日 17:39:41 作者：chengliang666

這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)留言板功能的具體代碼，供大家參考，具體內(nèi)容如下

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">發(fā)送</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();
    }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: