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

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;
}
* {

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

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

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