简单的聊天机器人

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_46413624

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量138

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_46413624/article/details/120760568

版权

1.实现界面
实现功能：
①ctrl+enter换行，enter直接发送消息
②机器人自动回复
③消息列表自动滚动到最底部
在这里插入图片描述
2.页面样式的基本实现

<!DOCTYPE html>
<html>
<head>
  <title>机器人</title>
  <link rel="stylesheet" type="text/css" href="robot.css"> 
  <script type="text/javascript" src="robot.js"></script>
</head>
<body>
  <div class="container">
    <header>
      <h2>聊天机器人小二黑</h2>
    </header>

    <ul class="message-list" id="messageList">
      <li class="message-list__item message-list__item-robot">
        <div>
          您好，小主人，我是聊天机器人小二黑，赶快和我聊天试试吧！
        </div>
      </li>
      <li class="message-list__item message-list__item-user">
        <div>
          吃了吗？
        </div>
      </li>
      <li class="message-list__item message-list__item-robot">
        <div>
          吃过啦,你呢
        </div>
      </li>
      <li class="message-list__item message-list__item-user">
        <div>
          还没有
        </div>
      </li>
   </ul>

    <div class="send-message">
      <textarea id="inputArea" onkeydown="enterSend()"></textarea>
      <button id="sendMsgButton" onclick="send()">发送</button>
    </div>
  </div>
</body>
</html>

3.js文件

//var sendbutton = document.getElementById('sendMsgButton');
// 定义机器人消息数组
var data = [
  '我是小二黑，你好啊',
  '今天天气不错哎',
  '手机快没电了，回聊呗',
  '我去洗澡了，待会聊呗',
  '惊不惊喜，意不意外，刺不刺激？'
]

//发送按钮点击事件
function send(){
  var user_msg = inputArea.value;//获取文本框的值
  inputArea.value = '';//点击按钮后清空文本框的值

  //调用函数，实现发送用户信息至对话框中
  createChild(user_msg,'message-list__item message-list__item-user');
  //实现机器人自动回复消息的功能
  var random = Math.floor(Math.random()*5);//产生一个0-4的随机数
  var robot_msg = data[random];
  createChild(robot_msg,'message-list__item message-list__item-robot');

  //消息列表自动滚动到最底部
  messageList.scrollTop = messageList.scrollHeight;
}

//实现节点的创建和内容的添加
function createChild(msg,name){
  //var messageList = document.getElementById('messageList'); 
  var li = document.createElement('li');//创建li节点，需要引号
  li.className = name;//设置li节点的类|用户or机器人
  var div = document.createElement('div');//创建div节点
  div.innerText = msg;//设置div节点的内容
  li.appendChild(div);//把div节点添加到li节点下
  messageList.appendChild(li);//把li节点添加到messageList节点下，不用引号
}

//enter按钮发送内容
function enterSend(){
	//ctrl+enter换行
	if (window.event.keyCode == 13 && window.event.ctrlKey){
		inputArea.value += "\n";
	}
	else if (window.event.keyCode == 13){
		send();
		inputArea.value='';
		event.preventDefault();//禁止回车换行
	}
}

4.css文件

* {
  margin: 0;
  padding: 0;
}
body{
	background-color: white;
}

.container {
  width: 480px;
  margin: auto;
  box-shadow: 0px 0px 12px rgba(39, 35, 35, 0.43);
  border-radius: 3px;
  border: 1px solid #dddcdd;
}

header {
  background-color: #008cee;
  height: 50px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  color: white;
}

header h2 {
  height: 50px;
  display:flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.message-list {
  background-color: white;
  height: 400px;
  padding: 10px;
  list-style: none;
  font-size: 16px;
  overflow: auto;

}

.message-list__item-robot,
.message-list__item-user {
  margin-bottom: 10px;
  display: flex;
}

.message-list__item-user {
  flex-direction: row-reverse;
}

.message-list__item-robot div,
.message-list__item-user div {
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  border-radius: 8px;
  padding: 7px 10px;
  max-width: 200px;
}

.message-list__item-robot div {
  background-color: #dddcdd;
}

.message-list__item-user div {
  background-color: #008cee;
  color: white;
}

.send-message {
  border-top: 1px solid #dddcdd;
  display: flex;
  height: 100px;
}

.send-message textarea {
  outline: none;
  padding: 6px;
  line-height: 20px;
  flex-grow: 1;
  border: none;
  border-bottom-left-radius: 3px;
  font-size: 16px;
}

.send-message button {
  cursor: pointer;
  width: 40px;
  border: none;
  outline: none;
  background-color: #008cee;
  color: white;
  border-bottom-right-radius: 3px;
}