摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=&q
<!DOCTYPE html>
<html>
<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>實(shí)戰(zhàn)聊天框信息</title>
<link rel="stylesheet" href="../common/css/admin.css">
</head>
<body>
<div>
<h2>在線客服</h2>
<div>
<ul>
在線客服
</ul>
</div>
<div>
<textarea name="text" id="text" cols="40" rows="5"></textarea>
<button name="send" type="button">發(fā)送</button>
</div>
</div>
<script>
var txt = document.getElementsByName('text').item(0);
var btn = document.getElementsByName('send').item(0);
var ul = document.getElementsByTagName('ul').item(0);
var num = 0;
document.onkeydown = function(event){
var e = event || window.event;
if(e && e.keyCode == 13){
chatword();
}
}
btn.onclick = chatword;
function chatword(){
if(txt.value.length == 0){
alert('輸入內(nèi)容為空');
return false;
}
console.log(txt.value);
var show = document.createElement('li');
show.innerHTML = '<p>' + txt.value + '</p>';
ul.appendChild(show);
txt.value = '';
num+=1;
setTimeout(function(){
var arr = ['hi!','謝謝','不好吧','有什么事嗎','好的','知道了'];
var reply = document.createElement('li');
reply.innerHTML = '<p>' + arr[Math.round(Math.random()*7)] + '</p>';
ul.appendChild(reply);
num+=1;
},1200);
if(num>=11){
ul.innerHTML = '';
num = 0;
}
}
</script>
</body>
</html>通過事件觸發(fā)來生成一個(gè)內(nèi)容進(jìn)行回復(fù)，達(dá)成簡易的回復(fù)系統(tǒng)
批改老師：韋小寶批改時(shí)間：2019-01-02 15:57:03
老師總結(jié)：后期還可以來寫一個(gè)匹配的那種回復(fù)系統(tǒng)，根據(jù)發(fā)送過來的消息中的關(guān)鍵字來進(jìn)行回復(fù)！