h5评论,请在手机上查看效果

最新推荐文章于 2022-06-02 08:59:48 发布

猿者使命召唤

最新推荐文章于 2022-06-02 08:59:48 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_44339721/article/details/102814856

版权

在这里插入代码片
```<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">
		<title>评论</title>
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.panel {
				width: 100%;
			}

			.popular_section {
				width: 86%;
				display: flex;
				justify-content: space-between;
				margin: 1rem auto 1rem auto;
			}

			.people_heading img {
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
			}

			.comment_section {
				width: 93%;
				display: flex;
				align-items: flex-start;
				margin: 0 auto 1rem auto;
			}

			.commentary_one {
				margin-right: 1.5rem;
				width: 13.8rem;
			}

			.content {
				display: flex;
			}

			.fabulous img {
				width: 1.3rem;
				height: 1.3rem;
			}

			.people_heading {
				margin-right: 0.8rem;
			}

			.weather {
				word-wrap: break-word;
			}

			.footer {
				position: fixed;
				bottom: 0;
				display: flex;
				align-items: center;
			}

			.footer input {
				outline: 0;
			}

			.foote {
				display: flex;
				align-items: center;
				opacity: 0;
			}

			.foote input {
				outline: 0;
			}

			.comment_sectio {
				display: flex;
				width: 80%;
				margin: 0 auto 0.2rem auto;

			}

			.people_head {
				margin-right: 0.8rem;
			}

			.people_head img {
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
			}

			.commentary {
				margin-right: 1.5rem;
				width: 13.3rem;
			}

			.fcc {
				display: none;
			}

			.footes {
				display: flex;
				align-items: center;
				opacity: 0;
			}

			.foo {
				display: flex;
				align-items: center;
				opacity: 0;
			}

			.readonly {
				border: none;
				background-color: inherit
			}

			.footer2 {
				position: fixed;
				bottom: 0;
				display: flex;
				align-items: center;
			}

			.footer3 {
				position: fixed;
				bottom: 0;
				display: flex;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="panel">
			<div class="popular_section">
				<div>
					<h5>评论 663</h5>
				</div>
				<div>
					<h5>热门</h5>
				</div>
			</div>
			<div class="footer">
				<div><input type="text" placeholder="在这里输入评论哦..." class="pinlun readonly" /></div>
				<div class="clicks jk" data-id="1"><img src="img/08.png" />633</div>
				<div><img src="img/08.png" />633</div>
				<div><img src="img/08.png" />633</div>
			</div>

		</div>
	</body>
	<script>
		$(function() {
			$(".clicks").click(function() {
				let data_id = $(this).attr('data-id')
				if (data_id == 1) {
					//获取input框中的值
					let vals = $(this).prev().find('input').val()
					if (vals !== '') {
						var contrus =
							`
						<div class="father" data-id="1">
							<div class="comment_section"  >
								<div class="people_heading"><img src="img/icon-suspension-frame-bg.png.png" /></div>
								<div>
									<div  data-id="3">
										<h5>飞飞啊</h5>
									</div>
									<div class="content">					
										<div class="commentary_one name" data-id="1">
											<div class="weather">${vals}</div>
											<p class="data_date">2018-8-22</p>
										</div>
										<div class="collen">
											<div class="fabulous"><img src="img/collen.png" /></div>
											<p>32</p>
										</div>
									</div>			
								</div>
										
							</div>
											<div class=""></div>
											<div class="zhan" hidden="hidden">收起10条1回复</div>
						<div>
					`
						//获取input框中的值
						$(this).prev().find('input').val()
						$("body").append(contrus)
					} else {
						alert('请输入信息?')
					}
				}
			})

			$(document).on('click', ".name", function() {
				$(".footer").remove()
				$(".pin").trigger("focus")
				var lko = $(".footer2").length
				if (lko == 0) {
					var showe =
						`<div class="footer2" >
						<div><input type="text" placeholder="在这里输入评论哦..." class="pin readonly" /></div>
						<div class="jk" data-id="1"><img src="img/08.png" />633</div>
						<div><img src="img/08.png" />633</div>
						<div><img src="img/08.png" />633</div>
					</div>`
					$(this).parents('body').append(showe)
				}
				$(this).parents('.comment_section').next().addClass('hjk')
			})
			/
			$(document).on('click', ".jk", function() {
					let vals = $(this).prev().find('input').val()
					//加油
					if (vals !== '') {
						var mm =
							`
              									<div class="comment_sectio">
              										<div class="people_head"><img src="img/icon-suspension-frame-bg.png.png" /></div>
              										<div>
              											<div>
              												<h5>飞飞啊2333222</h5>
              											</div>
              											<div class="content">
              												<div class="commentary name" data-id="1">
              													<div class="weather">${vals}</div>
              													<p class="data_date">2018-8-22</p>
              												</div>
              												<div class="collen">
              													<div class="fabulous"><img src="img/collen.png" /></div>
              													<p>32</p>
              												</div>
              											</div>			
              										</div>
              												
              									</div>
              													<div class="kong">
              													</div>
              							`
						$(".hjk").append(mm)			 
				} else {
					alert('请输入信息?')
				}
			})









































		})
	</script>

</html>

猿者使命召唤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5评论,请在手机上查看效果

在这里插入代码片```<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-eq...
复制链接

扫一扫