一键直达

  • 效果图
  • html
  • css


效果图

javascript留言板 留言板jquery_css3


javascript留言板 留言板jquery_css3_02

html

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<title>模拟留言板</title>
	<link href="lyb_style.css" rel="stylesheet" type="text/css" />
	<style>
		.yellow {
			background: yellow;
		}

		.grey {
			background: #f1f1f1;
		}

		.show {
			display: block
		}

		.hide {
			display: none;
		}

		i {
			margin-right: 5px;
		}
	</style>

</head>

<body>

	<div id="parent">
		<h4>留言内容：</h4>
		<div id="box">
			<em id="em">这里会显示留言内容……</em>
			<!-- <p class="grey">
				<i>2.</i>
				<b>sdsfw3</b>
				<span class="hide">
					<a href="javascript:;">确定删除</a>
					<strong style="color:red">第2条</strong>
				</span>
				</p> -->
		</div>

		<textarea id="text"></textarea><br />
		<input id="btn" type="button" value="发表留言" />
	</div>
	<script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/*
		在JQ中所有的事件都是通过addEventListener绑定的，所以当使用事件的时候
		如果不解除前一次绑定，那么容易出现事件重复执行。
		解决：
			off().click()  解除上一次的事件
		*/
		var $parent = $('#parent'),
			$btn = $parent.find('#btn'),
			$text = $parent.find('#text'),
			$box = $parent.find('#box'),
			$em = $parent.find('#em'),
			num = 0;

		//给发表留言绑定点击事件
		$btn.click(function () {
			let val = $text.val(); // 获取到文本域的内容；
			let $p = $(
				`<p class="grey"><i>${++num}.</i><b>${val}</b><span class="hide"><a href="javascript:;">确定删除</a><strong style="color:red">第${num}条</strong></span></p>`
			);
			$box.append($p);
			// 当鼠标划上p标签时，让当前的标签背景变成黄色；
			$p.mouseover(function () {
				// this --> 转成jquery的实例
				// attr : 设置行间属性,找到该元素下的span，将其class设置为show;
				$(this).attr("class", "yellow").find("span").attr("class", "show");
			})
			$p.mouseout(function () {
				// this --> 转成jquery的实例
				$(this).attr("class", "grey").find("span").attr("class", "hide");
			})
			// 点击确定删除，删除该条信息
			$p.find("a").click(function () {
				$(this).parent().parent().remove();
				let allI = $box.find("i");
				let allStrong = $box.find("strong");
				for (let i = 0; i < allI.length; i++) {
					$(allI[i]).text(`${i+1}.`);
					$(allStrong[i]).text(`第${i+1}条`);
				}
				// 如果length为0；说明没有了标签，让em再次显示；
				if (allI.length === 0) {
					$em.css("display", "block");
				}
				// 每删除一条就把全局num-1;
				num--;
			})
			$text.val("");
			$em.css("display", "none")
		})
	</script>
</body>

</html>

css

@charset "utf-8";
/* CSS Document */

* { padding: 0; margin: 0; }
li { list-style: none; }

#parent { width: 600px; margin: 0 auto; }
h4 { line-height: 40px; margin-bottom: 10px; border-bottom: 1px solid #333; }
p { width: 100%; background: #f1f1f1; position: relative; margin-bottom: 25px; }
#box { width: 580px; padding: 25px 10px 0; border: 1px solid #ddd; margin-bottom: 10px; }
span { position: absolute; top: 0; right: 0px; }
em { position: relative; top: -13px; }
#text { width: 100%; height: 90px; overflow: auto; }
#btn { width: 100%; height: 50px; }