基于JavaScript实现留言板功能

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

成都创新互联公司专注于新城网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供新城营销型网站建设，新城网站制作、新城网页设计、新城网站官网定制、微信小程序定制开发服务，打造新城网络公司原创品牌,更为您提供新城网站排名全网营销落地服务。

html代码


  
    hello?
    
    hello
    
    hi
    
    hehe
    
    goodbye
    
    。。。。
    
    I LOVE YOU

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();
    }
}

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

当前标题：基于JavaScript实现留言板功能
文章转载：http://dzwzjz.com/article/jejspi.html

大橙子网站建设，新征程启航

基于JavaScript实现留言板功能

其他资讯