效果图:
CSS部分:
body {
background: #eee;
padding: 0;
margin: 0;
}
.cnt {
width: 500px;
height: 500px;
margin: auto;
background: #fff;
padding: 2px 20px;
}
.bt {
width: 100%;
height: 280px;
background: #aaa;
text-align: center;
line-height: 200px;
}
input {
width: 300px;
height: 35px;
}
button {
width: 100px;
height: 40px;
border: none;
margin-left: 20px;
}
span {
background: skyblue;
padding: 5px 10px;
border-radius: 3px;
text-align: center;
display: inline-block;
margin-bottom: 20px;
}
HTML部分:
<div class="cnt"></div>
<div class="bt">
<input type="text"><button>发送</button>
</div>
JS部分:
var o = document.getElementsByClassName('cnt')[0];//div
var ipt = document.getElementsByTagName('input')[0];
//发送事件
document.querySelector('button').onclick = function () {
send();
};
//回车事件
ipt.onkeyup = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
send();
}
};
//发送信息
function send() {
// console.log(ipt.value);
var txt = ipt.value;
if (txt.trim() == '') {
alert('消息不能为空!');
return;
}
// o.innerHTML=o.innerHTML+"<br>"+txt;
//创建标签
var s = document.createElement('span');
s.innerHTML = txt;
o.appendChild(s);//将新建的标签添加到div中
o.innerHTML = o.innerHTML + "<br>";//添加换行
ipt.value = '';//清空消息框
}