前端|Javascript小实战2-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41903171/article/details/89383510

本文详细介绍了一种基于HTML和CSS实现的对话框样式设计，包括对话框的布局、图片切换效果以及用户输入与发送消息的功能。通过JavaScript实现了图片状态切换和用户消息的即时显示，提升了用户体验。

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

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		ul,p{margin:0px;padding:0px;list-style:none;}
		input{outline:none;}
		#wrap{width:240px;height:460px;margin:30px auto;position:relative;background:url(3.jpg) no-repeat;}
		#con{width:200px;height:336px;left:21px;top:52px;position:absolute;overflow:auto;border:1px solid #000;padding-top:6px;}
		#con li{width:150px;line-height:20px;margin-bottom:10px;}
		#con p{width:117px;border-radius:20px;padding-left:3px;font-size:13px;}
		#text{position:absolute;height:20px;width:120px;left:55px;bottom:68px;border-radius:8px;border:1px solid #ccc;}
		#bnt{position:absolute;right:18px;bottom:70px;}
		#span{width:20px;height:20px;position:absolute;left:25px;bottom:72px;background:red;}
		img{width:20px;height:20px;}	
		.fl{float:left;}
		.p1{background:#00d94a;float:left;color:#fff;}
		.p2{background:#e5e5ea;float:right;color:#007aff;}
		.fr{float:right;}
		.img1{float:left;margin-right:10px;}
		.img2{float:right;margin-left:10px;}
		
			
			
		</style>
		<script>
		
		window.οnlοad=function (){
			var oImg=document.getElementById("img");
			var oBnt=document.getElementById("bnt");//发送按钮
			var oUl=document.getElementById("con");//对话框
			console.log(oBnt);
			var oVal=document.getElementById("text");//用户说的话
			//点击img图像的时候 张图片切换
			//src 不能作为判断条件
			var onOff=true;//没有什么可以解析为true，创建个true
			
			oImg.οnclick=function(){//2个状态取其一
				
				if(onOff){
					oImg.src="2.jpg";//点一下，变这个图片，再点也动不了了，因为写死了，
					onOff=false;//怎样让它第二次变回1图片，让其为false,回到一开始判别，是false。则自动执行下面的。
				}else{
					oImg.src="1.jpg";
					onOff=true;//让第三次变回2图片的方式。
				}
			}
				
				oBnt.οnclick=function(){
					
					//往ul 发送li li 里面有图片和文字
					//获取文字  即用户说的话
					var ovalue=oVal.value;
					
					if(onOff){//两个状态取其一，我点的是发送，发送时是哪个图，对应的哪个值。
						oUl.innerHTML+="<li class='fl'><img src='1.jpg' class='img1' /><p class='p1'>"+ovalue+"</p></li>"
					}else{
						oUl.innerHTML+="<li class='fr'><img src='2.jpg' class='img2' /><p class='p2'>"+ovalue+"</p></li>"
					}
				
					
					
					
				}
				
			}
		
			
			
			
		</script>
	</head>
	<body>
		<div id="wrap">
			<ul id="con">
				
			</ul>
			<input type="text" id="text"/>
			<input type="button" value="发送" id="bnt" />
			<div id="span">
					<img src="1.jpg" id="img"/>
				
				
			</div>
			
			
		</div>
	</body>
</html>

这样好看一些：
在这里插入图片描述