效果图

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; }

Jquery-留言板相关推荐

asp.net ajax 源码,asp.net+jquery+ajax简单留言板 v1.2
asp.netC#+jquery1.4.1 +ajax留言板程序说明采用asp.net C#+ jquery1.4.1 +ajax的实现主要用aspx文件请求还可以用ashx处理 ajax返回类 ...
Jquery来制作简易版的留言板.
效果图: 代码如下: <html lang="en"> <head><meta charset="UTF-8"><me ...
用基础jQuery制作个性化留言板
用基础jQuery制作个性化留言板话不多说,先看效果: 一开始是这样的: 发帖:功能实现头像随机,昵称,手机型号,发布内容添加到社交区
Django+Layui+SQLite+JQuery实现一个简单的留言板
本次使用到的知识: Django框架的使用 Layui的使用 Jquery的使用 SQLite的使用实现效果: 目录功能结构图准备工作创建项目 1.创建项目 2.创建App 3.创建对应文件夹 ...
简单留言板前端（仿微博） - JQuery
.html 结构文件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
玛塔留言板无刷新留言板程序
简介: 简单的无新留言板程序,主要用于技术交流,jQuery的简单应用,SQLite数据库. 网盘下载地址: http://kekewl.cc/TmQCeiczJv90 图片:
PHP写一个简单的留言板
要求: 1.留言本,即留言后,能让客户用户查看其留言. 2.留言本该具有用户发表的标题,用户的注册名,发表的内容. 3.所以留言本的实现需要两个模块,一个是静态的html页面,提供表单供用户输入,另一 ...
【Nodejs】留言板案例
文章目录 1 统一处理服务器资源: 1.1 关于fs.readdir() 文件目录读取: 1.2 模板引擎: 1.2.1 在node中使用模板引擎: 1.2.2 each : 2 留言板: 2.1 实 ...
ajax实现留言板功能 -
首先理解ajax是实现页面无刷新效果,留言就是要这种效果,当发布留言时候直接展示留言内容在下面. 好了直接上代码 1.新建一个控制器,内容如下: <?php namespace app\inde ...
JavaScript之留言板制作
本文主要介绍留言板的制作,用户可对新闻消息进行评论,发表之后评论会被置于顶端,点击相应删除按钮即可删除.本文主要介绍三种方式,区别在于如何实现评论的删除. 1.利用函数局部作用域在函数的局部作用域内 ...

Jquery-留言板

一键直达

效果图

html

css

Jquery-留言板相关推荐

最新文章

热门文章