在线聊天--2018-04-04

<!DOCTYPE html>
<html lang="en">
<head>
    <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-type: none;
            line-height: 2em;
            padding: 15px;
            overflow: hidden;
        }
        table{
            width: 90%;
            height: 80px;
            margin: auto;
            /*border: 1px solid red;*/
 }
        td{
            /*border: 1px solid red;*/
 }
        button{
            width: 60px;
            height: 40px;
            background-color: seagreen;
            color: #fff;
            border: none;
        }
        button:hover{
            cursor: pointer;
            background-color: orange;
        }
        textarea{
            /*禁止文本域调整*/
 resize: none;
            border: none;
            background-color: lightyellow;
        }
    </style>
    <meta charset="UTF-8">
    <title>在线客服</title>
</head>
<body>

    <div class="box">
        <h2>在线客服</h2>
        <div contenteditable="true">
            <ul>
                <li></li>
            </ul>
        </div>

        <table>
            <td><textarea cols="50" rows="4" name="text"></textarea></td>
            <td><button>发送</button></td>
        </table>
    </div>
<script type="text/javascript">
    var inputtext = document.getElementsByName("text")[0];
    var btn = document.getElementsByTagName("button")[0];
    var list = document.getElementsByTagName("ul")[0];
    var sum = 0;
    btn.onclick = function () {
        if(inputtext.value.length==0){
            alert("客观，您想说点什么呢？");
            input.focus();
            return false;
        }
        var userComment = inputtext.value;
        inputtext.value = "";
        var li = document.createElement("li");
        var userPic = "<img src='images/peter.jpg' width='30' style='border-radius: 50%'>"
 li.innerHTML = userPic+ userComment;
        list.appendChild(li);
        sum++;
        setTimeout(function () {
            var info=["好烦人，本姑娘好累","除了不允许退货、退款，什么都可以聊","有事情快说"];
            var tmp = info[Math.floor(Math.random()*3)];
            var reply = document.createElement("li");
            var kefuPic = "<img src='images/zly.jpg' width='30' style='border-radius: 50%'>"
 reply.innerHTML = kefuPic+"<span style='color: red'>"+tmp+"</span>";
            list.appendChild(reply);
            sum++;
        },1000);
        if(sum>10){
            list.innerHTML = "";
        }
    }

</script>
</body>
</html>
appendChild增加子元素
setTimeout定时器
相关文章
