使用原生javascript动态操作DOM对象，实现简易聊天机器人的功能。

纯html源代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言自动回复案例</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    h2 {
        color: brown;
        text-align: center;
        margin-top: 20px;
    }
    .container {
        width: 400px;
        height: 650px;
        background-color: rgb(230, 230, 230);
        margin: 20px auto;
        padding-top: 20px;
    }
    .container>.list {
        width: 350px;
        height: 450px;
        list-style-type: none;
        background-color: white;
        margin: auto;
        overflow: hidden;
    }
    .container>form {
        width: 360px;
        height: 120px;
        margin: 20px auto;
    }
    .container>form>textarea {
        float: left;
    }
    .container>form button {
        width: 50px;
        height: 30px;
        color: white;
        border: none;
        background-color: royalblue;
        float: left;
        margin: 37px 7px;
    }
    .container>form button:hover {
        color: white;
        background-color: tomato;
    }
    .container>form button:active {
        background-color: rebeccapurple;
    }
</style>
<body>
    <h2>自动聊天</h2>
    <div class="container">
        <ul class="list"></ul>
        <form action="" name="comment" method="POST">
            <textarea name="content" id="" cols="30" rows="7"></textarea>
            <button name="send">发送</button>
            <button name="clean">清屏</button>
        </form>
    </div>
</body>
<script type="text/javascript">
    // 获取留言显示区
    var ul = document.querySelector("ul");
    // 获取表单
    var form = document.forms.namedItem("comment");
    // 获取发送按钮
    var send = document.querySelectorAll("button")[0];
    // 获取清屏按钮
    var clean = document.querySelectorAll("button")[1];
    // 加入头像
    var face = '<img src="face1.jpg" width=30 style="border-radius:50%">';
    // 获取时间
    var myDate = new Date();
    // 创建一个计数变量用来控制聊天框中的内容条目数
    var count = 0
    // 创建按钮事件监听
    send.addEventListener("click", function (ev) {
        // 清除事件默认行为
        ev.preventDefault();
        // 创建新留言
        var li = document.createElement("li");
        // 判断用户输入内容是否为空
        if (form.content.value.trim().length === 0) {
            alert('请输入留言！');
            // 设置焦点在输入区域
            form.content.focus();
            return false;
        } else {
            li.innerHTML = face + form.content.value + '<span style="padding-left:10px;">' + myDate.toLocaleTimeString() + '</span>' + '<a href="" onclick="del(this)" style="padding-left:15px;color:coral;text-decoration:none;">删除</a>';
        }
        // 将最新留言加入到聊天框顶部
        if (ul.childElementCount === 0) {
            ul.appendChild(li);
            count += 1;
        } else {
            ul.insertBefore(li, ul.firstElementChild);
            count += 1;
        }
        // 自动回复功能，setTimeout(方法,延迟时间)设定定时器
        setTimeout(function () {
            // 创建自动回复内容数组
            var replys = ['你好呀，有什么事情吗？', '我是机器人，请说话。', '如果你要资询业务，请拨打1111。', '请提需求。', '我是您的回复助手！'];
            //使用Math.floor()函数取数组的元素值，Math.random()*5取0-4之间的数字
            // Math.floor()向下取整，Math.random()随机取>=0、<1的小数
            var random = replys[Math.floor(Math.random() * 5)];
            var reply = document.createElement("li");
            var sevPic = '<img src="face2.jpg" width=30 style="border-radius:50%">';
            // 随机取自动回复数组中的字符串
            reply.innerHTML = sevPic + '<span style="color:#0aa344;">' + random + '</span>' + '<span style="padding-left:10px;">' + myDate.toLocaleTimeString() + '</span>';
            // 将自动回复置顶到聊天窗口
            ul.insertBefore(reply, ul.firstElementChild);
            count += 1;
        }, 500);
        // 如果聊天条目超过10则清空条目
        if (count > 10) {
            ul.innerHTML = '';
            count = 0;
        }
        // 发送完毕后清空输入框并设置焦点到输入框
        form.content.value = null;
        form.content.focus();
    }, false);
    // 创建清空聊天框按钮事件
    clean.addEventListener("click", function (ev) {
        // 清除事件默认行为
        ev.preventDefault();
        // 弹出确认框选确定后清空聊天框内容
        if (confirm('是否清空聊天框？')) {
            // 逐条删除聊天记录
            var lis = document.querySelectorAll("li");
            for (var i = lis.length - 1; i >= 0; i--) {
                lis[i].parentElement.removeChild(lis[i]);
            }
        }
        // 设置焦点在输入区域
        form.content.focus();
    }, false);
    // 删除单条聊天记录
    function del(ele) {
        this.event.preventDefault();
        return confirm('是否删除？') ? ul.removeChild(ele.parentElement) : false;
    }
</script>
</html>