用HTML5做一个类似于智能对话的可以自动回复的网页对话框

本文链接：https://blog.youkuaiyun.com/weixin_46216820/article/details/124387466

本文记录了一个入门级编程爱好者如何使用HTML5和JavaScript制作一个模拟智能对话的网页对话框。通过设计对话框界面，实现点击发送按钮将输入内容显示，并添加延迟回复效果，增加人性化体验。详细介绍了实现过程，包括创建send()、Clocknow()和huifu()函数，以及配合动画效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

作为一个入门级编程小白（现在正处于大三阶段，感觉学校教的东西实在是太少了，还是得自学）来说，自己动手做一些个小项目的时候，就会萌发一些奇怪的想法，但是呢我对这样一些奇怪的想法有时又不知从何处下手，就很让人烦恼。其实有时觉得这样挺不错的，毕竟我一直觉得无论是遇到什么事情不会并不是最可怕的，而是遇到了没想法才是最可怕的。那最近就现在自己做一个云空间网站，用来自己玩一玩（毕竟还是处于学习阶段）。在做的过程中去浏览别人家网站就发现人家都有类似于人工客服的模块，有这么一个模块，顿时就感觉高级了不少。于是呢，就有了给自己的小项目也做这么一个类似的人工智能客服的模块。今天这一篇文章就先记录一下关于这个模块的一些相对于用户可见的部分完成。这里就按照个人理解来写了，当然网上也有许多大佬的相关内容，也很是不错，可以用来参考。

那么废话就不再多说了，开始进入主题

实现

1.简单的设计一个对话框

dhk.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
			}
			.box{
				margin-left: 30%;
				margin-top: 10%;
			}
			button{
			
			}
			.xiaoxi{
				width: 600px;
				height: 450px;
				border: 1px solid black;
				overflow: scroll;
				/*position: absolute;*/
			}

		</style>

	</head>
    <body>
        <div class="box" >
			<div class="xiaoxi" id="xiao" >
				
			</div>
			<input type="text" style="width: 500px;" id="textid" placeholder="请输入"/>
			<button onclick="send()" style="width: 90px;">发送</button>
		</div>
		
		
	</body>
</html>

最终的一个效果呢如下图所示：

2.接下来要做的就是当鼠标点击发送按钮时将输入区内的内容显示到内容显示区

这一部分的内容用的是js来编写

新建dhk.js代码文件，并在dhk.html代码文件的<head>标签内导入dhk.js

导入

<script type="text/javascript" src="js/dhk.js"></script>

在这一部分要用到createElement这个对象来创建元素节点以达到最终的一个效果

（1）创建send()函数（绑定到发送按钮上）---》οnclick="send()"

该函数的主要目的是将输入区所输入的内容发送到内容显示区并显示

			function send(){
				var x=document.getElementById("xiao");    //获取xiao这个div框，目的是将发送的内容显示在这个大的框中
				weit()    //调用等待函数
//				输入
				var textid =document.getElementById("textid").value    //获取输入框内的值并将其赋值给textid
				var box_btn=document.createElement("div");    //创建一个新的div标签
				var nowtime=Clocknow();    //Clocknow()函数获取当前的时间
				var box_t=document.createTextNode(nowtime)    //创建文本节点并将获取到的时间放入到节点当中
				box_btn.style.height='12px';    //设置新建div结点的样式
				box_btn.style.width='120px';
				box_bt