摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>簡(jiǎn)單的實(shí)現(xiàn)聊天功能</title></head><style> body{b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡(jiǎn)單的實(shí)現(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>阿瑪準(zhǔn)設(shè)計(jì)客服</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('不寫(xiě)東西，你發(fā)個(gè)毛');
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=[
'你說(shuō)什么，你是煞筆？',
'我沒(méi)話(huà)可說(shuō)，你滾',
'我還能說(shuō)什么',
'你別無(wú)理取鬧',
'我走了'
];
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>
批改老師：查無(wú)此人批改時(shí)間：2019-03-26 09:09:27
老師總結(jié)：完成的不錯(cuò)。就是話(huà)太粗了，有可能會(huì)被用戶(hù)打的，繼續(xù)加油