php智能客服,智能在线客服系统

摘要：

&在线客服系统

div:nth-child(1){

width: 460px;

height: 660px;

background-color: lightblue;

margin: 30px auto;

color: #333;

box-shadow: 2px 2px 2px #757575;

}

h2{

text-align: center;

margin-bottom: -10px;

}

div:nth-child(2){

width: 400px;

height: 500px;

border: 4px double green;

background-color: #ccc;

margin: 10px auto 10px;

}

ul{

list-style-type: none;

line-height: 2em;

overflow: hidden;

padding: 15px;

}

textarea{

border: none;

resize: none;

background-color: bisque;

width: 340px;

margin-left: 20px;

font-size: 1.5rem;

border-radius: 8px;

}

button{

width: 60px;

height: 40px;

background-color: green;

color: white;

border: none;

border-radius: 8px;

}

button:hover {

cursor: pointer;

background-color: coral;

}

在线客服

发送

//获取页面中的相关元素

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.value.length===0){

alert('客官，你想说些什么呢？')

return false;

}

var userComment = text.value;  //将用户提交的内家获取并保存

text.value = '';  //同时将用户留言区清空

// 创建一个li

var li = document.createElement('li');

//用户头像

var userPic = '';

li.innerHTML = userPic +'  ' + userComment;

list.appendChild(li);  //将用户的信息添加到聊天窗口中来

sum += 1;

// 设置回复定时器，2秒钟后自动回复

setTimeout(function(){

//自动回复的信息模板

let info = [

'今天的天气真是不错',

'感谢您光顾本店，这里肯定有你心爱的物品',

'听说ET最近要来地球，亲，有空多看看天空',

'时间不早了，亲，注意身体，早点休息',

'你好',

'我很好',

'吃饭了没有？',

'祝你天天开心。',

'贺喜发财。',

];

let temp = info[Math.floor(Math.random()*8)];

// 创建一个li

let reply = document.createElement('li');

//客服头像

let kefuPic = '';

reply.innerHTML = kefuPic + ' '  +'' +temp+'';

list.appendChild(reply);  //将用户的信息添加到聊天窗口中来

sum += 1;

},2000);

//大于10行时，清空窗口，并将计数器清零

if (sum>10){

list.innerHTML = ' ';

sum = 0;

}

}

批改老师：天蓬老师批改时间：2019-04-24 15:35:12

老师总结：这个案例, 就是考察最基本的dom操作....

dom操作是js最常用的场合