JQuery 动态留言

最新推荐文章于 2024-04-19 17:05:38 发布

霜序0.2℃

最新推荐文章于 2024-04-19 17:05:38 发布

阅读量724

点赞数

分类专栏：前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/Dueser/article/details/121052177

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JQuery 动态留言

请设计一个动态留言的功能,满足如下要求:

页面默认有让用户填写昵称的及留言内容的文本框
用户输入的昵称及内容不可为空，当输入后点发布时，能将最新的留言显示在留言框及昵称文本框的上方,不断发布则不断添加
要求新留言默认在上，旧留言默认在下
每条新增的留言后方会跟随一个删除按钮,点击删除按钮的时候会删除该条留言
要求使用JQuery来实现;6.要求对整个留言功能进行简单的美化；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言</title>
    <style>
        body {
            text-align: center;
        }

        #btn {
            color: #2fa8ec;
        }

        #all {
            width: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.6.0.js"></script>

<div id="all">
    <div class="messages"></div>
    <div>
        <form method="post">
            <label for="msg">发送信息:</label><input type="text" id="msg">
            <input type="button" id="btn" value="提交">
        </form>
    </div>
</div>

<script>
	$(document).ready(function () {
		let cnt = 0;
		$("#btn").click(function () {
			let val = $("#msg").val();
			let btn = "<button>删除</button>"
			let msg = "<div class='" + cnt + "'>" + val + btn + "</div>"
			cnt++;
			$(".messages").prepend(msg);//前面加
			// $(".messages").append(msg);//后面加
			$("#msg").val("")
		})
		$(".messages").on("click", "button", function () {
			let id = $(this).parent().prop("className")
			console.log(id)
			$("div[class=" + id + "]").hide(1000)
			// $("div[class="+id+"]").remove()
		})
	})
</script>
</body>
</html>

美化的话,做了一个删除的移除渐出效果,如图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wgUltwn7-1635580695440)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\image-20211030155243021.png)]$

霜序0.2℃

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery 动态留言

JQuery 动态留言请设计一个动态留言的功能,满足如下要求:页面默认有让用户填写昵称的及留言内容的文本框用户输入的昵称及内容不可为空，当输入后点发布时，能将最新的留言显示在留言框及昵称文本框的上方,不断发布则不断添加要求新留言默认在上，旧留言默认在下每条新增的留言后方会跟随一个删除按钮,点击删除按钮的时候会删除该条留言要求使用JQuery来实现;6.要求对整个留言功能进行简单的美化；<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫