JS实现简单聊天框

最新推荐文章于 2023-03-28 20:38:03 发布

whlaaa

最新推荐文章于 2023-03-28 20:38:03 发布

阅读量617

点赞数 1

文章标签： html js

本文链接：https://blog.csdn.net/whlaaa/article/details/119618935

版权

这篇博客展示了如何使用HTML、CSS和JavaScript实现手机界面的模拟，包括一个聊天窗口和头像切换功能。用户点击头像可以在两种图片之间切换，输入文字并发送后，消息会根据头像状态显示在不同的位置。此示例有助于理解前端交互的基本原理。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#phone {
				width: 350px;
				height: 600px;
				margin: 0 auto;
				background: url(phone.jpg) no-repeat;
				background-size: 350px 600px;
				position: relative;
			}
			
			#interface {
				position: absolute;
				width: 290px;
				height: 390px;
				background-color: white;
				top: 85px;
				left: 30px;
			}
			
			#chat {
				position: absolute;
				height: 40px;
				width: 290px;
				bottom: 88px;
				left: 30px;
				background-color: #EBF8F6;
			}
			
			#portoait {
				position: absolute;
				width: 30px;
				height: 30px;
				border: 1px solid black;
				top: 5px;
			}
			
			#container {
				position: absolute;
				width: 180px;
				height: 25px;
				left: 35px;
				top: 5px;
			}
			
			#submit {
				position: absolute;
				height: 35px;
				width: 60px;
				right: 5px;
				top: 5px;
				border: 0;
				background-color: transparent;
			}
			.one{
				width: 100%;
				height: 20px;
				float: left;
			}
			.left{
				background-color: skyblue;
				padding: 5px;
			}
			.right{
				background-color: yellowgreen;
				padding: 5px;
			}
			.two img,
			.right{
				float: right;
			}
		</style>
	</head>

	<body>
		<div id="phone">
			<div id="interface">
				
			</div>
			<div id="chat">
				<img src="1.png" id="img" />
				<input type="text" id="container" />
				<button id="submit">发送</button>
			</div>
		</div>
		<script type="text/javascript">
			var phone = document.getElementById("phone")
			var interface = document.getElementById("interface")
			var img = document.getElementById("img")
			var container = document.getElementById("container")
			var submit = document.getElementById("submit")

			//头像变换
			var flag = true;
			img.onclick = function() {
				if(flag == true) {
					img.src = "2.png"
					flag = false;
				} else {
					img.src = "1.png"
					flag = true;

				}
			}
			submit.onclick = function() {
				if(flag == true) {
					interface.innerHTML += "<p class='one'><img src='1.png' />" + "<span class='left'>"+container.value+"</span>"+"</p>"
					
				} else {
					interface.innerHTML += "<p class='two'> <img src = '2.png'>" + "<span class ='right'>"+container.value+"</span>"+"</p>"
					
				}
				container.value=""
			}
		</script>
	</body>

</html>

效果：