<!DOCTYPE html>
<html lang="en">
<head>
<title>留言板</title>
<script src="jquery-3.7.1.min.js"></script>
<script>
$(function(){
$("#submit").click(function(){
var msg = '<p>'+$("#name").val()+':'+$("#text").val()+'</p>';
var history = $("#show").html();
$("#show").html(msg+history);
});
$("body").on("click","#remove",function(){
$("p").remove();
});
$("#toggle").click(function(){
$("p").toggle(1000);
});
});
</script>
<style>
.box{
margin: 100px auto;
width: 600px;
border: 1px solid #000;
padding: 20px;
}
</style>
</head>
<body bgcolor="#E6E6FA">
<div class="box" id="weibo">
<h2>留言板</h2>
<hr>
<div style="border: 1px solid #000;">
<h5>
留言内容:
</h5>
<div id="show"> </div>
</div>
<h5>请输入你的昵称：</h5>
<input id="name" />
<br>
<h5>请输入你的留言内容：</h5>
<textarea id="text"></textarea>
<br>
<br>
<button id="submit">发言</button>
<button id="remove">删除</button>
<button id="toggle">隐藏/显示</button>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
