摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .div{height: 800px;width: 50
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .div{height: 800px;width: 500px;border:1px solid #CCCCCC;margin:auto;background:#FAFAFA;} .div h3{text-align: center;height: 80px;width: 100%;background: cornflowerblue;color: #FFFFFF;line-height: 80px;margin: 0;} .div1{height:630px;width:100%;} .div1 ul{list-style-type: none;padding: 0 20px;} .div1 ul li{line-height: 50px;overflow: hidden;} .div2{height: 70px;width: 100%;text-align: center;} .div2 input{height: 50px;width: 380px;border:1px solid #C3C5C6;border-radius: 10px;padding: 0 10px;} .div2 button{height: 55px;width: 80px;background: #C3C5C6;border:none;color: #FFFFFF;} </style> <body> <div class="div"> <h3>在線客服</h3> <div class="div1"> <ul></ul> </div> <div class="div2"> <input type="text" name="input"> <button onclick="submit()">發(fā)送</button> </div> </div> </body> <script> var input = document.getElementsByTagName('input')[0]; var ul = document.getElementsByTagName('ul')[0]; var sum = 0; //計(jì)數(shù)器 function submit(){ if(input.value ==''){ alert('請輸入信息!'); input.focus(); } var li = document.createElement('li'); li.setAttribute('style','position: relative;') //添加用戶頭像 var userPic = '<img src="../img/user.jpg" style="height:30px;width:30px;border-radius:15px;"/>' li.innerHTML = '<span style="background:#ffffff;border-radius: 10px;position:absolute;right:40px;line-height:30px;top:10px;padding:0 10px">'+input.value+'</span>'+'  '+'<span style="position:absolute;right:0px;">'+userPic+'</span>' //拼接用戶頭像和輸入信息 ul.appendChild(li); input.value = ''; sum = sum+1; //設(shè)置定時(shí)器 2秒后自動(dòng)回復(fù) setTimeout(function(){ var message = [ '對方不想和你說話,并向你扔了一只拖拉基', '客服小姐姐正在忙', '親,有什么可以幫助你的嘛', '嘀,我是智能機(jī)器人,有需要請回答', '客服小姐姐下班吃飯了,稍后回復(fù)您' ]; var message1 = message[Math.floor(Math.random()*4)]; //隨機(jī)數(shù)隨機(jī)獲取數(shù)組中的內(nèi)容 var li1 = document.createElement('li'); //添加客戶頭像 var servicePic = '<img src="../img/service.jpg" style="height:30px;width:30px;border-radius:15px;"/>'; li1.innerHTML = servicePic+'  '+'<span style="background:pink;border-radius: 10px;padding:5px 10px">'+message1+'</span>'; ul.appendChild(li1); sum = sum+1; },2000); //信息多余十條時(shí) 清空窗口并將計(jì)數(shù)器清零 if(sum>12){ ul.innerHTML = ''; sum = 0; } } //setTimeout(code,millisec) code要執(zhí)行的函數(shù) millisec在執(zhí)行代碼前需等待的毫秒數(shù) //Math.random() 0-1之間的隨機(jī)數(shù) //Math.floot() 取整數(shù) </script> </html> 1.獲取input元素,ul元素,給button綁定點(diǎn)擊事件,初始化變量sum存儲信息條數(shù) 2.創(chuàng)建一個(gè)新元素li,創(chuàng)建一個(gè)變量存儲用戶頭像,獲取input框的值 3.將用戶頭像和input的值拼接在一起添加到li的內(nèi)容中,將li添加到頁面ul中,信息條數(shù)+1 4.創(chuàng)建一個(gè)數(shù)組存儲客服回復(fù)的信息,math.floor(math.random())方法隨機(jī)獲取數(shù)組中的內(nèi)容,setTimeout()方法設(shè)置定時(shí)器,2s后執(zhí)行 5.創(chuàng)建一個(gè)新元素li1,創(chuàng)建一個(gè)變量存儲客服頭像 6.將客服頭像和回復(fù)的信息拼接在一起添加到li1的內(nèi)容中,將li1添加到頁面ul中,信息條數(shù)+1 7.當(dāng)信息條數(shù)sum>12條時(shí),清空ul列表中的聊天信息,將sum值重置為0
批改老師:查無此人批改時(shí)間:2019-01-10 14:57:51
老師總結(jié):不錯(cuò)呀,你的邏輯很清晰。學(xué)習(xí)就是整理知識,你做的很好,進(jìn)步會很快,加油