简单的聊天框jsDOM添加元素节点
白云2019-04-30 13:24:43373<!DOCTYPE html>
<html>
<head>
<title>text DOM聊天窗口</title>
<style type="text/css">
.msg {
width: 500px;
margin: 10px auto;
}
.msgbox {
width: 100%;
height: 500px;
background-color: lightpink;
box-shadow: 2px 2px 2px #ed4040;
word-wrap:break-word;
overflow-y:scroll; //超出高度出现滚动条
}
.msgbox textarea{
resize: none;
width: 100%;
height: 500px;
}
.inputform{
margin: 10px 1px;
width: 100%;
height: 200px;
}
.inputform input[type="text"] {
width: 70%;
height: 40px;
margin-right: 1px;
background-color: lightblue;
}
.inputform input[type="button"] {
width: 29%;
height: 40px;
}
li {list-style: none;}
</style>
</head>
<body>
<div class="msg">
<div class="msgbox">
<!-- <textarea name="text"></textarea> -->
<ul class="msgbox_ul">
<li></li>
</ul>
</div>
<div class="inputform"><input type="text" name="msg" value="" maxlength="50" placeholder="请输入消息"><input type="button" name="" value="发送" class="btn"></div>
</div>
<script type="text/javascript">
// let ty = document.head
// ty.getElementsByTagName('title')[0].innerHTML="hahahah"
// console.log(ty)
// let dc = document.childNodes[1].childNodes[1]
// console.log(dc)
//获得操作元素。let是声明块级变量。
let ul = document.getElementsByTagName('ul')[0];
// console.log(msgboxul);
let msg = document.getElementsByName('msg')[0];
let btn = document.getElementsByClassName('btn')[0];
let num = 0;
//当点击触发函数
btn.onclick=function () {
//判断有没有内容 ===是全等于包括数据类型都做比较
if (msg.value.length===0){
msg.style.backgroundColor="red"; //没有内容 输入框变红
return false; //返回停止向下执行
}
let comment = msg.value;
let lis = document.createElement('li');
let intext = "<img src='static/images/a.png' width='20px'>" +comment;
lis.innerHTML=intext;
ul.appendChild(lis); //向父元素的内的尾部插入元素
msg.value=""; //设置空
msg.focus(); //获得焦点
num+=1; //计数器+1 用于清空内容
// 计时器函数 执行一次， 2个参数，第一个需要执行的函数，第二参数是等待多少毫秒执行第一个参数
setTimeout(function(){
let remsg=[
"能加下我微信吗？",
"我的微信号是403927274",
"你会javascript吗？我们要招聘会JS的程序员!"
];
let rom = Math.floor(Math.random()*3);
let lis1 = document.createElement('li');
lis1.innerHTML="<span style='color:#ed4040;'>"+remsg[rom]+"</span>"
ul.appendChild(lis1);
}, 2000);
if(num>10){
let last = ul.lastChild; //清空前获得最后一个元素
ul.innerHTML=""; //清空
ul.appendChild(last); // 将最后一个元素追加上去。
num=0; //初始化
}
}
msg.onclick=function(){
this.style.backgroundColor="lightblue"; //还原输入框背景
}
</script>
</body>
</html>