html简单的聊天页面,js创建简易的聊天窗口

这里是代码片

* {

padding: 0;

margin: 0;

}

section {

width: 400px;

padding: 10px;

border: solid black 1px;

float: left;

margin-left: 20px;

}

.context {

width: 400px;

height: 300px;

border: 1px dashed #C1C1C1;

overflow: scroll;

margin-bottom: 10px;

}

textarea {

width: 400px;

height: 100px;

}

button {

width: 100px;

}

发送

发送

//通过id名称获取元素对象

function $id(idName) {

return document.getElementById(idName);

}

var cont1 = document.getElementsByClassName("context")[0];

var cont2 = document.getElementsByClassName("context")[1];

var btn1 = $id("btn1");

var btn2 = $id("btn2");

var text1 = document.getElementsByTagName("textarea")[0];

var text2 = document.getElementsByTagName("textarea")[1];

function toDB(num) {

return num < 10 ? "0" + num : num;

}

function time() {//获取时间

return toDB(new Date().getFullYear()) + '/' + toDB(new Date().getMonth()) + '/' + toDB(new Date().getDate()) + '  ' + toDB(new Date().getHours()) + ':' + toDB(new Date().getMinutes()) + ':' + toDB(new Date().getSeconds())

}

btn1.onclick = function () {

cont2.innerHTML += '

cont1.innerHTML += '

cont1.scrollTop = cont1.scrollHeight;//滚动条距离顶部=滚动的高度。保持显示最新内容。

}

btn2.onclick = function () {

cont1.innerHTML += '

cont2.innerHTML += '

cont2.scrollTop = cont2.scrollHeight;

}

document.onkeydown = function (eve) {//ctrl+回车发送消息。

var e = eve || event;

var code = e.keyCode || e.which || e.charCode;

if (e.ctrlKey && code === 13 && document.activeElement == text1) {//文本框聚焦时才可使用组合键。

btn1.onclick();

} else if (e.ctrlKey && code === 13 && document.activeElement == text2) {

btn2.onclick();

}

}

————————————————

生成两个简易聊天窗口。可以用组合键发送消息。自己发送的消息显示在右。对方发送的消息显示在左。