php客服窗口,制作一个客服小界面

摘要：

&实战

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: 500px;

border: 4px double green;

background-color: #efefef;

margin:20px auto 10px;

}

ul{

list-style-type: 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;

}

在线客服

发送

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

let btn =document.getElementsByTagName('button')[0];

let text = document.getElementsByName('text')[0];

let list = document.getElementsByTagName('ul')[0];

let sum = 0;

//添加点击事件，获取用户留言并发送到窗口

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 = '';

li.innerHTML = userPic + ' ' +userComment;

list.appendChild(li);

sum +=1;

setTimeout(function(){

let info = [

'真烦人，有话快说！',

'除了退货，什么都可以聊！',

'说的啥，本姑娘咋听不懂？',

'在我觉得方便的时候在回复你！',

'投诉我？投诉我的人多了，你算老几啊？'

];

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

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-03-10 14:12:27

老师总结：写的还算是很不错的 没事要记得多去练习练习哦 可以考虑使用jQuery来把这个项目改写一下 就是相当于是把前端好好复习了一下