html5实现留言功能,基于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();

}

}

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