实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟在线***</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 500px;
height: 600px;
background: lightblue;
margin: 30px auto;
}
h3{
text-align: center;
padding-top: 10px;
font-weight: normal;
color: #9A0000;
}
.box1{
width: 460px;
height: 450px;
overflow: hidden;
border: solid 1px #ccc;
margin: 20px auto;
background: #FFF;
}
ul,li{
list-style: none;
line-height: 40px;
}
li{width: 90%;margin:8px auto auto;}
.box2{
width: 460px;
margin: auto;
}
.box2 textarea{
background: linen;
resize: none;
float: left;
outline: none;
padding-left: 5px;
}
.box2 button{
width: 80px;
height: 40px;
background: #009E94;
color: #FFF;
border: none;
margin: 5px 0 0 0;
display: inline-block;
float: right;
cursor: pointer;
}
.box2 button:hover{
background: #40AFFE;
}
img{
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<h3>在线***</h3>
<div class="box1">
<ul>
<li></li>
</ul>
</div>
<div class="box2">
<textarea id="" cols="48" rows="3" name="text" onkeydown="fn()"></textarea>
<button>提交</button>
</div>
</div>
<script>
let ul = document.getElementsByTagName('ul')[0];//根据标签名获取ul元素
let text = document.getElementsByName('text')[0];//根据name属性名获取元素
let btn = document.getElementsByTagName('button')[0];//根据标签名获取ul元素
let num = 0;
//把提交信息封装在一个方法里面
function btnValue() {
if(text.value.length === 0 || text.value.replace(/(^\s+)|(\s+$)/g, "")==='')
{
alert('请输入内容在提交');
return false;
}
let textValue = text.value;
text.value = '';
let img1 = '<img src="img/img1.jpg" width="30" height="30">';
//创建一个新的节点
let li = document.createElement('li');
li.innerHTML = '<span style="color: red;text-align: right;width: 100%;display: block">'+textValue+' '+img1+'</span>';
ul.appendChild(li);
num+=1;
setTimeout(function () {
let msg = [
'充值问题',
'退订问题',
'升级问题',
'新用户',
'老用户',
'vip用户'
]
let img2 = '<img src="img/img2.jpg" width="30" height="30">';
let temp = msg[Math.floor(Math.random()*5)];
let liMsg = document.createElement('li');
liMsg.innerHTML = '<span style="color:#AA1111;text-align: left;width: 100%;display: block">'+img2+' '+temp+'</span>';
ul.appendChild(liMsg);
num+=1;
},2000);
//如果信息超过6条自动清空
if(num>6)
{
ul.innerHTML = '';
num=0;
}
}
//点击提交按钮发送信息
btn.onclick = function () {
btnValue();
}
//如果按回车键发送信息
function fn() {
if(event.keyCode==13)
{
btnValue();
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
