登录  /  注册
博主信息
博文 60
粉丝 1
评论 1
访问量 62371
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JS利用现学的知识制作一个在线聊天机器人_2018年9月14日
PHP学习
原创
675人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机器人聊天</title>
</head>
<body>
    <input type="text" name="info">
    <button type="button">提交</button>
    <ul></ul>
<script>
    let input = document.getElementsByName('info')[0];
    let ul = document.getElementsByTagName('ul')[0];
    let button = document.getElementsByTagName('button')[0];

    button.onclick = function() {
        let li = document.createElement('li');	// 创建列表项li
        li.innerHTML = input.value;	// 填充内容
        ul.appendChild(li);	//将内容添加到列表中
        input.value = '';	//清空文本框
    };
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天机器人</title>
    <style>
        .box {
            width: 500px;
            height: 600px;
            background-color: lightgrey;
            margin: 0 auto 10px;
            border: 1px solid lightblue;
            text-align: center;
            font-size: 22px;
        }
        .chat {
            width: 480px;
            height: 400px;
            margin: 20px auto;
            background: #fff;
        }
        .send {
            width: 480px;
            height: 50px;
            margin: 0 auto;
        }
        textarea {
            border: none;
            resize: none;
            height: 50px;
            border-radius: 5px;
        }
        button {
            border: none;
            border: 1px solid #636363;
            width: 100px;
            height: 50px;
            background-color: coral;
            font-size: 1.2rem;
            border-radius: 5px;
            color: white;
        }
        button:hover {
            cursor: pointer;
            background-color: lightcoral;
        }
        ul {
            list-style-type: none;
            text-align: left;
        }
    </style>
</head>
<body>
<div class="box">
    <p>聊天窗口</p>
    <div class="chat">
        <ul class="ul">

        </ul>
    </div>
    <div class="send">
        <table>
            <tr>
                <td><textarea cols="50" rows="5"></textarea></td>
                <td><button type="button" name="button">发送</button></td>
            </tr>
        </table>
    </div>
</div>
<script>
    //获取标签
    let button = document.getElementsByTagName('button')[0];
    let content = document.getElementsByTagName('textarea')[0];
    let ul = document.getElementsByClassName('ul')[0];
    let sum = 0;

    button.onclick = function () {
        if (content.value.length === 0) {
            alert('是不是你没有输入内容');
            return false;
        }
        let li = document.createElement('li');
        let userpic = '<img src="1.jpg" width="50px" height="50px" style="border-radius: 50%">'
        li.innerHTML = userpic + content.value;
        ul.appendChild(li);
        content.value = '';
        sum = sum + 1;
        //设置计数器
        setTimeout(function () {
            let info = [
                '你好!','你真烦人','你是哪个哦,我又认不到你','不跟你说了,你很烦人','我在学习'
            ];
            let temp = info[Math.floor(Math.random()*3)];
            let carly = document.createElement('li');
            let kefu = '<img src="1.jpg" width="50px" height="50px" style="border-radius: 50%">';
            carly.innerHTML = kefu + temp;
            ul.appendChild(carly);
            sum = sum + 1;
        },2000);

        if (sum > 10) {
            ul.innerHTML = '';
            sum = 0;
        }
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结,主要运用的知识就是插入内容这块

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学