在线客服-2019年5月10日21点00分

下面将展示在线客服代码及效果图
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客服自动回复</title>
    <style type="text/css">
        div:nth-child(1) {
            width: 450px;
            height: 650px;
            background-color: lightskyblue;
            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: none;
            line-height: 2em;
            /*border: 1px solid red;*/
            overflow: hidden;
            padding: 15px;
        }

        table {
            width: 90%;
            height:80px;
            margin: auto;
        }

        textarea{
            /*width: 300px;*/
            border: none;
            resize: none;
            background-color: lightyellow;

        }
        button {
            width: 60px;
            height: 40px;
            background-color: seagreen;
            color: white;
            border: none;
            /*text-align: left;*/

        }
        button:hover {
            cursor: pointer;
            background-color: orange;
        }
    </style>
</head>
<body>
<div>
    <h2>在线客服</h2>
    <div contenteditable="true">
        <ul>
            <li></li>
        </ul>
    </div>
    <table>
        <tr>
            <td align="right"><textarea cols="50" rows="4" name="text" autofocus></textarea></td>
            <td align="left"><button type=button>发送</button></td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var btn = document.getElementsByTagName('button')[0];
    var text=document.getElementsByName('text')[0];
    var list=document.getElementsByTagName('ul')[0];
    var sum=0;
    btn.onclick=function () {
        var li=document.createElement('li');
        li.innerHTML=text.value;
        text.value='';
        list.appendChild(li);
      sum+=1;
        //自动回复
        //定时
       setTimeout(function () {
            var info = ['你好', '在的', '嗯，稍等'];
            var temp = info[Math.floor(Math.random() * 3)];
            var li1 = document.createElement('li');
            li1.innerHTML = temp;
            list.appendChild(li1);
            sum+=1;
        },2000);
if(sum>10){
    list.innerHTML='';
    sum=0;
}


    }

</script>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.本次学到了在线客服的基本流程
知识点：setTimeout（）定时器；
Math.floor(Math.random() * 3）随机数；
实例

相关文章
