摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM实战模拟在线客服系统</title> <style> div:nth-child(1){ width: 450px; height:&nbs
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM实战模拟在线客服系统</title> <style> div:nth-child(1){ width: 450px; height: 650px; background: gray; margin: 30px auto; color:#333; box-shadow: 2px 2px 2px #808080; border-radius: 10px; } h2{ text-align: center; line-height: 50px; margin-bottom: -15px; color:#fff; } div:nth-child(2){ width: 400px; height: 500px; border:4px double yellow; background: #efefef; margin: 20px auto 10px; border-radius: 10px; } ul{ list-style: none; line-height: 2em; overflow: hidden; padding: 15px; } table{ /*width: 90%;*/ height: 80px; margin: auto; } table tr{ padding: 0 10px; } table td {padding:0;margin:0;} textarea{ border: none; resize: none; background: #fff; border-top-left-radius: 10px; border-bottom-left-radius: 10px; width: 340px; padding: 0; } button{ width: 60px; height: 45px; background: #B8C5BC; color:#000; border:none; margin-bottom: 4px } button:hover{ cursor: pointer; background: orange; } </style> </head> <body> <div> <h2>在线客服</h2> <div> <ul> <li></li> </ul> </div> <table> <tr> <td><textarea name="text" cols="50" rows="3"></textarea></td> <td><button type="button">发送</button></td> </tr> </table> </div> <script type="text/javascript"> //获取到页面中的相关元素 let btn = document.getElementsByTagName('button')[0]; //获取发送按钮元素 let text = document.getElementsByName('text')[0]; //获取文本域元素 let list = document.getElementsByTagName('ul')[0]; //获取聊天显示框ul(li父级) let sum = 0;//计数器 let h2 = document.getElementsByTagName('h2')[0]; //获取h2 //添加点击事件,获取用户的内容并发送到窗口 btn.onclick = function(){ //获取用户提交的内容 if(text.value.length === 0){ alert("同志啊,你什么都没写呢"); return false; } let userComment = text.value; //获取用户提交的内容 text.value = '';//清空输入 //创建一个li节点 let li = document.createElement('li'); let userPic = '<img src="3.jpg" width="30" style="border-radius:50%; "/>'; li.innerHTML = userPic+' '+userComment; //拼接头像+空格+聊天内容 list.appendChild(li); //添加到页面 h2.innerHTML = '对方正在输入...'; sum+=1; //设置定时器 2秒后自动回复 setTimeout(function(){ //自动回复模板 let info = [ '真烦人,有话快说,别耽误我玩斗地主!', '除了退款,随便问!', '对不起,上厕所去了', '再见!', '投诉的的我人都消失了' ]; let temp = info[Math.floor(Math.random()*4)]; let reply = document.createElement('li'); let kefuPic = '<img src="4.jpg" width="30" style="border-radius:50%; "/>'; reply.innerHTML = kefuPic+' <span style="color:red">'+ temp + '</span>'; list.appendChild(reply); h2.innerHTML = '在线客服'; sum+=1; },2000); //清空窗口 if(sum>10){ list.innerHTML = ''; sum = 0; } } </script> </body> </html>
批改老师:韦小宝批改时间:2018-11-09 17:37:25
老师总结:代码是不完整的,补充后再提交.
还有,以后,提交这类作业 ,推荐配上一个运行效果图
这样一目了然,可以让老师快速了解到你的代码,
另外,在代码中,要有一定的注释,特别是声明变量的时候,推荐写出该变量的