实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结，主要运用的知识就是插入内容这块
