摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>在線聊天系統(tǒng)</title> <style type="text/css"> div:nth-child(1){ width: 450px; height: 650px; background-color: lightblue; margin: 30px auto; color: #333; box-shadow: 2px 2px 2px #808080; } h2{ text-align: center; margin-bottom: -10px; } div:nth-child(2){ width: 400px; height: 650px; border: 4px double green; background-color: #efefef; margin: 20px auto 10px; } ul{ list-style: none; line-height: 2em; overflow: hidden; padding: 15px; } table{ width: 90%; height: 80px; margin: auto; } textarea{ border: none; resize: none; background-color: lightyellow; } button{ width: 60px; height: 40px; background-color: seagreen; color: white; border: none; } button:hover{ cursor: pointer; background-color: orange; } </style> </head> <body> <div> <h2>在線聊天</h2> <div contenteditable="true"> <ul> <li></li> </ul> </div> <table> <tr> <td align="right"><textarea name="text" id="" cols="50" rows="4"></textarea></td> <td align="left"><button type="button">發(fā)送</button></td> </tr> </table> </div> <script type="text/javascript"> var btn=document.getElementsByTagName('button')[0]; var text=document.getElementsByName('text')[0]; var list=document.getElementsByTagName('ul')[0]; var sum=0; btn.onclick=function () { if (text.length===0){ alert('客官是不是忘記輸入內(nèi)容了'); return false; } var userComment=text.value; text.value=''; var li=document.createElement('li'); li.innerHTML=userComment; var userPic='<img src="1111111.jpg" width="30" style="border-radius: 50%">'; li.innerHTML=userPic+' '+userComment; list.appendChild(li); sum+=1; setTimeout(function () { var info=[ '你好，我是中文網(wǎng)客服', '有事請(qǐng)留言或撥打熱線', '請(qǐng)你撥打電話, '歡迎你的光臨', '好的 謝謝' ]; var temp=info[Math.floor(Math.random()*3)]; var reply=document.createElement('li'); var kefuPic='<img src="hyd.png" width="30" style="border-radius: 50%">'; reply.innerHTML=kefuPic+' '+'<span style="color: red">'+temp+'</span>'; list.appendChild(reply); sum+=1; },2000); if (sum>10){ list.innerHTML=''; sum=0; } } </script> </body> </html>
批改老師：天蓬老師批改時(shí)間：2019-03-25 09:26:29
老師總結(jié)：下次記得代碼格式化再提交, 這次暫時(shí)過(guò), 下不為例