jquery模拟手机聊天操作

最新推荐文章于 2024-11-18 09:05:47 发布

是小王啊i

最新推荐文章于 2024-11-18 09:05:47 发布

阅读量371

点赞数

文章标签： jquery js html

本文链接：https://blog.youkuaiyun.com/qq_45378970/article/details/108903134

版权

jquery 专栏收录该内容

14 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 300px;
				height: 500px;
				border: 3px solid lightgray;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}
			#one{
				width: 100%;
				height: 50px;
				border-top: 2px solid lightgray;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			span{
				display: block;
				background: red;
				margin-right: 3px;
			}
			#o1{
				flex: 1;
			}
			#o2{
				flex: 4;
			}
			#o3{
				flex: 1;
			}
			input{
				margin-top: 3px;
				margin-left: 3px;
				width: 92%;
				height: 35px;
			}
			#btn{
				width: 100%;
				height:100%;
				text-align: center;
			}
			.left{
				width: 100px;
				height: 65px;
				float: left;
				clear: both;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			.right{
				width: 100px;
				height: 65px;
				float: right;
				clear: both;
			}
		</style>
		<script src="jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div id="box">
			<div id="oo">
				
			</div>
			<div id="one">
				<span id="o1">
					<img src="img/1.png" width="50px" height="50px">
				</span>
				<span id="o2">
					<input type="text" id="text1">
				</span>
				<span id="o3">
					<button id="btn">发送</button>
				</span>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$('#btn').click(function(){
					var div=$('<div>');
					div.addClass('left');
					var img=$("<img src='img/1.png' width='40px' height='40px'>");
					div.append(img);
					var span=$('<span>');
					span.css({
						'width':'75px',
						'height':'45px',
						'background':'lightgray'
					})
					span.html($('#text1').val());
					div.append(span);
					$('#oo').append(div);
					// div.next().addClass('right');
				})
			})
		</script>
	</body>
</html>