PC端聊天机器人界面（html实现）

最新推荐文章于 2024-09-28 09:30:00 发布

爱学习的森

最新推荐文章于 2024-09-28 09:30:00 发布

阅读量4.1w

点赞数 15

分类专栏： js 文章标签：聊天页面聊天机器人

本文链接：https://blog.csdn.net/weixin_41606022/article/details/100867167

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现效果：
在这里插入图片描述

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>PC机器人聊天界面</title>
<style>
.box{
	width: 100%;
	height: 500px;
	position:absolute;
	top:0;
}
#content{
	width: 98%;
	height: 500px;
	margin-right:1%;
	margin-left:1%;
}
form{
	width: 100%;
	height:60px;
	line-height:40px;
	border-top:1px solid #ccc; 
	position:absolute;
	bottom:0;
	left:0;
}
#content form img{
	border:1px solid #ccc;
	border-radius:7px;
	padding:2px; 
	cursor:pointer;
	margin:5px 0 0 5px;
	float:left;
	width:40px;
	height:40px;
}
#content form input[type='text']{
	width:80%;
	height:40px;
	line-height:27px;
	border-radius:7px; 
	border:1px solid #ccc;
	float:left;
	margin-left:5px; 
	margin-top:5px; 
	outline:none;
	padding:0 5px; 
}
#content form input[type='button']{
	width:12%;
	height: 40px;
	border-radius:5px; 
	background:#fff;
	border:none;
	margin-left:1%; 
	cursor:pointer;
	font-size:27px;
	margin-top:5px;
}

.info_box{
	width: 100%;
	height:440px;
	overflow-y:auto;
}
.info_box::-webkit-scrollbar {display:none}
.info_box div{
	margin:0 0 5px;
	position:relative;
}
.info_box .info_r{
	
}
.info_box .info_l{

}
.info_box .info_l img{
	position:absolute;
	left:0;
	top:0;
}
.info_box .info_r img{
	position:absolute;
	right:0;
	top:0;
}
.info_box .info_l span{margin-left: 60px;margin-top:16px;}
.info_box .info_r span{margin-left:28%;margin-top:16px;}


.info_box span{
	width: 66%;
	height: auto;
	font-size:14px;
	background:#ddd;
	border-radius: 10px;
	padding:8px;  
	color:#333;
	display: block;
	position:relative;
	top:0;
}


.info_box .info_l img{
	float:left;
	width:50px;
    height:50px;
}



.info_r img{
	float:right;
	width:50px;
    height:50px;
}



</style>
</head>
<body>
<div class="box">
	<div id="content">
		<div class="info_box">
		
			 <div class="info_r">
					<img src="img/2.jpg" class='pic_r'>
					<span class='infor'>Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</span>
				</div> 	
			 <div class="info_l">
				<img src="img/1.jpg" class='pic_l'>
				<span class='infoo'>在您开始之前，在你的计算机将需要Python，但您可能不需要下载它。首先检查(在命令行窗口输入python)有没有安装Python!如果你看到了一个Python解释器的响应，那么就能在它的显示窗口中得到一个版本号。通常较新的版本都可以做到Python的向前兼容。</span>
			</div>	 
			
		</div>
		<form action="">
			<img src="img/1.jpg" id='pic'>
			<input type="text" placeholder='尽情畅聊吧' id='inp'>
			<input type="button" value='发送' id='send'>
		</form>
	</div>
</div>


<script>
var send =document.getElementById('send');
var pic =document.getElementById('pic');
var txt =document.getElementById('inp');
var info_box = document.getElementsByClassName('info_box')[0];

var onoff=true;
pic.onclick=function(){
	if(onoff){
		pic.src='img/2.jpg';
		onoff=false;
	}
	else{
		pic.src='img/1.jpg';
		onoff=true;
	}
};

send.onclick=function(){
	if(txt.value===''){
		alert('请输入内容');
	}
	
	else{
	    
		var nDiv = document.createElement('div');
		var spans = document.createElement('span');
		var imgs = document.createElement('img');
		var sTxt = document.createTextNode(txt.value);
		var info_box = document.getElementsByClassName('info_box')[0];
		spans.appendChild(sTxt);
		nDiv.appendChild(spans);
		nDiv.appendChild(imgs);
		// nDiv.style.display='block';
		info_box.insertBefore(nDiv,info_box.lastChild);
		spans.className='infor';
	    nDiv.className='info_r';
	    imgs.src='img/2.jpg';
		
		var nDiv = document.createElement('div');
		var spans = document.createElement('span');
		var imgs = document.createElement('img');
		var sTxt = document.createTextNode("你说啥？");
		var info_box = document.getElementsByClassName('info_box')[0];
		spans.appendChild(sTxt);
		nDiv.appendChild(spans);
		nDiv.appendChild(imgs);
		// nDiv.style.display='block';
		info_box.insertBefore(nDiv,info_box.lastChild);
	    spans.className='infol';
			nDiv.className='info_l';
			imgs.src='img/1.jpg';
/*
		if(onoff==true){
			spans.className='infor';
			nDiv.className='info_r';
			imgs.src='img/2.png';
		}
		if(onoff==false){
			spans.className='infol';
			nDiv.className='info_l';
			imgs.src='img/1.png';
		}
*/
	}
	txt.value='';
}


</script>
	
</body>
</html>