摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>簡單的實現(xiàn)聊天功能</title></head><style> body{b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單的實現(xiàn)聊天功能</title>
</head>
<style>
body{background: beige;}
div:nth-child(1){width:600px;text-align: center;color: #009688;}
div:nth-child(2){width:600px; height:650px; background:#009688; box-shadow:0 0 20px #888; padding-top: 5px;}
li{list-style: none; color:#fff;}
div:nth-child(3){width:600px;height:150px;background:#fff; box-shadow:0 0 20px #888; border-top:none; }
textarea{width:520px;height: 140px; border: none; resize: none;}
button{height:40px; width:60px; background:pink;margin-right:1px;}
button:hover{background:#000;color: pink;}
</style>
<body>
<div>
<h1>阿瑪準設(shè)計客服</h1>
</div>
<div>
<ul>
</ul>
</div>
<div>
<table>
<tr>
<td><textarea name="text" rows="4" cols="50" ></textarea></td>
<td><button nam]="button">發(fā)送</button></td>
</tr>
</table>
</div>
</body>
</html>
<script>
var list=document.getElementsByTagName('ul')[0];
var btn=document.getElementsByTagName('button')[0];
var text=document.getElementsByName('text')[0];
var sum='';
btn.onclick=function(){
if(text.value.length === 0){
alert('不寫東西，你發(fā)個毛');
return false;
}
var li=document.createElement('li');
var usercomment=text.value;
text.value='';
var userpic='<img style="width:30px;" src="images/avatar1.png">'
li.innerHTML=userpic +' '+usercomment;
list.appendChild(li);
sum+=1;
setTimeout(function(){
var info=[
'你說什么，你是煞筆？',
'我沒話可說，你滾',
'我還能說什么',
'你別無理取鬧',
'我走了'
];
let user2=info[Math.floor( Math.random()*4)];
let li2=document.createElement('li');
let user2pic='<img style="width: 30px" src="images/avatar2.png">';
li2.innerHTML=user2pic+' '+'<span style="color:#2F4056 ">'+user2+'</span>';
list.appendChild(li2);
sum+=1;
},2000)
if(sum >15){
list.innerHTML='';
sum=0;
}
}
</script>