JS实现简易版备忘录

1、概述

实现像手机便签一样功能的简易版备忘录页面，该备忘录全部用JQuery提供的功能实现，非常简单易懂。

2、功能介绍

（1）简洁的页面，主界面仅提供两个按钮用于添加和删除记录;

（2）添加完成的多条记录，支持批量选择删除；

（3）每条记录支持点击行内进行修改;

（4）支持任意操作步骤进行修改、添加、删除功能;

3、实现原理

预先定义一个空的无序列表，

（1）添加记录：利用JQuery的append();方法，在空的ul列表内添加记录，并同时添加一个确定按钮；

（2）修改记录：ui下li标签绑定点击事件，使用val();方法获取内容并将其转换为多行文本输入框；

（3）删除记录：使用hasClass方法定义单选框，如果被选中则remove();移除列表；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简易版备忘录</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><link rel="stylesheet" type="text/css" href="css/简易版备忘录.css">
</head>
<body><div class="aide"><button class="add">+</button><h2>备忘录</h2><button class="delete">×</button><hr><ul></ul></div><script type="text/javascript">$(function(){$(".add").on("click",function(){/*** 备忘录内添加1条记录;*/$("ul").append("<li><textarea></textarea><button class='sub'>确定</button></li>");//点击添加按钮，在ul内添加一个多行输入文本框和一个按钮;$("ul").on("click" ,"li .sub",function(){var text=$(this).parent().children("textarea").val();//获取多行输入文本框内的值;$(this).parent().html("<div></div>"+"<p>"+text+"</p>");//将获取到的输入内容转换为段落格式,同时在内容前添加一个单选圆圈;})/*** 修改点击的记录;*/$("ul").on("click","li p",function(){var textarea=$(this).parent().children("p").val();//获取段落标签内的值;$(this).parent().html("<textarea>"+textarea+"</textarea><button class='sub'>确定</button>");//将获取到的段落标签内的值转换为标签文本，并同时添加一个确定按钮;})$("ul").on("click","li div",function(){if($(this).hasClass("on")){$(this).removeClass("on");//如果单击时单选被选中，则移除选中效果;}else{$(this).addClass("on");//否则添加选中效果;}$(".delete").on("click",function(){$(".on").parent().remove();//删除选中的记录;})})})     })</script>
</body>
</html>

JS实现简易版备忘录相关推荐

原生js实现简易版消消乐
效果图整体思路文件结构 html结构 <div id="pop_star"><div id="targetScore">目标分数:1 ...
JS自制简易版数字华容道小游戏
最近复习了下前端基础知识HTML+JS(是真的非常基础那种,久不用,基本忘完了). 复习了一小部分内容,闲暇之余打算利用刚复习的js基础知识做个小游戏,刚好手机上下载的游戏集中就有一个数字益智游戏-- ...
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS 实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 2. 代码实现 2.1 HTML和JS代码 2.2 CSS代 ...
js计算器代码加减乘除_如何用jQuery做一个简易版计算器
经过几个小时地敲敲打打,终于把这一部分的代码完成了. 这类问题的难点不在于布局,而是如何恰当地使用jQuery达成计算.交互的目的,比如储存.显示数值,数据类型的转换等. 在听老师讲课之前的我,思路是 ...
html5 拖拽滚动条,js 简易版滚动条实例(适用于移动端H5开发)
废话不多说,直接上代码滑动条 *{ margin: 0; padding: 0; } #content{ margin-top: 50px; width:100%; height: 200px; b ...
JS正则表达式-附身份证号码验证（简易版）
文章目录 JS正则表达式匹配与搜索一.方括号,圆括号二.修饰符三.元字符四.量词身份证号码验证(简易版) 身份证号码规则: 1.地址码 2.年份码 3.月份码 4.日期码 5.顺序码 6. ...
原生js开发web简易版版消灭星星
昨天看视频之后,整理思路,自己完成了简易版消灭星星思路: 模块1:初始化初始化总分数.当前分数.背景图.选择的星星分数初始化星星(生成二维数组,对二维数组的每一个对象设置样式(长.宽.背景图), ...
消灭星星网页版java代码,js实现消灭星星(web简易版)
昨天看视频之后,整理思路,自己完成了简易版消灭星星思路: 模块1:初始化初始化总分数.当前分数.背景图.选择的星星分数初始化星星(生成二维数组,对二维数组的每一个对象设置样式(长.宽.背景图), ...
node.js——麻将算法（六）简易版麻将出牌AI1.0
普通麻将的出牌AI如果不是要求特别高的话,其实蛮容易实现的,毕竟大多数人打牌都只是看自己的手牌. 所以作为简易版的AI,出牌的策略只要奔着胡牌去就可以了.我们能想到的就是把相邻或相同的牌凑到一起,把单 ...

JS实现简易版备忘录

1、概述

2、功能介绍

3、实现原理

JS实现简易版备忘录相关推荐

最新文章

热门文章