サマリー：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聊天室</title>
<style>
.box1{width:320px;height:500px;box-shadow: 5px 5px 5px 0 grey;border-radius:5px;background-color: slateblue;}
/* n從1開(kāi)始 */
div:nth-child(2){width:300px;height:300px;border-radius:3px;background-color: #f5f5f5;margin:10px;}
li{list-style: none;color:#333;text-align: left;}
h2{color:#fff;padding:30px 10px 0px}
textarea{border:none;border-radius:3px;background-color: #fff;margin:10px;}
button{border:none;width:80px;height:28px;margin-right:10px;float:right;border-radius:3px;}
</style>
</head>
<body>
<div class="box1">
<h2>客服中心</h2>
<div>
<ul></ul>
</div>
<div>
<textarea cols="40" rows="3" placeholder="輸入聊天內(nèi)容"></textarea>
</div>
<button onclick="ff()">發(fā)送</button>
</div>
<script>
var input=document.getElementsByTagName('textarea')[0];
var ul=document.querySelector('ul');
function ff(){
if (input.value.trim()=="") { //tim()
alert("內(nèi)容不可以為空");
return false;
}
var li=document.createElement('li');//****
var userpic='<img src="imgs/0.gif" width="20">';// width="30"
li.innerHTML=userpic + " " + input.value;
ul.appendChild(li);
input.value="";
input.focus();
setTimeout(reply(),1000);
var sum;
sum+=1;
if (sum==5) ul.innerHTML="";//ul
}
function reply(){
let anwsers=['我是小米','好好學(xué)習(xí)天天向上','我最喜歡毛毛','天氣太冷了','你快回來(lái)']
let rpl=anwsers[Math.floor(Math.random()*4)] //少寫(xiě)了字母w
let mypic='<img src="imgs/1.gif" width="30">'
var li=document.createElement('li');
li.innerHTML=mypic+" "+rpl;
ul.appendChild(li);
}
</script>
</body>
</html>
添削の先生：天蓬老師添削時(shí)間：2019-02-16 16:10:47
先生のまとめ：最好能寫(xiě)點(diǎn)你的作業(yè) 感想, 通過(guò)你這個(gè)案例,你學(xué)會(huì)了什么