如何使用前端DOM操作制作一个便签：

当你看到这张要实现功能的图片时，不知道你现在的心情如何？反正我看到这张图片的时候心情就跟着张图片的背景颜色一样灰暗！
只要你在动手敲代码前想好各大功能应该要怎么实现？其实问题好像并没有你想象中的那么难！

功能分析：

页面布局（HTML+CSS）

<body><div class="_head"><div class="line"></div><div class="operation"><div><a href="javascript:;" class="add" title="点击添加便签"><img src="../memoimages/add.png"></a></div><div class="meanmenuface"><a href="javascript:;" class="delete" title="清空便签"><img src="../memoimages/delete.png" alt=""></a><a href="javascript:;" title="设置" class='set'><img src="../memoimages/install.png"></a><a href="javascript:;" title="退出" class="quit"><img src="../memoimages/false.png" ></a></div></div><div class="headtext"><span>QG便笺</span></div><div class="search"><input class="find" type="text" value="搜索..." spellcheck="false"><a class="find_img" href="javascript:;"></a><a href="javascript:;" class="abolish"></a></div>  </div><div class="_body"><div class="_body_text"><textarea name="" class="text" cols="30" rows="10" style="resize: none;" spellcheck="false"></textarea><a href="javascript:;" class="cancel"><img src="../memoimages/quxiao.png" title="取消"></a><a href="javascript:;" class="finish"><img src="../memoimages/finish.png" title="完成"></a></div><ul class='note'></ul>  </div></body>
为什么我刚刚在上面有说道你看到我的页面之后会怀疑我说的话呢？因为浏览器渲染出来的页面是这样的：


额…
低情商：你的页面真丑！
高情商：哇！你这个页面做的还挺独特的嘛！

好吧！咱们主要要实现的是功能，兄弟们别画错重点！下面我来依次介绍一下各个功能是如何实现的吧！

1、增加便笺（并存储到本地）

可以说是便签最重要的地方了，也是便签的灵魂所在！从这里开始，我们脑子里就要时刻想着本地存储的事了，毕竟你总是要关掉页面的嘛！为了让页面重新打开之后用户的信息还在，这是一个非常关键的操作！
 var list = [];//使用替换法设置一个模板,%为其做了一个标记var tpl="<li key='{%index%}'><p class='main_text'>{%content%}</p><a href='#' class='time'>"+ year + '年' + month +'月'+ day +'日'+'</a>'+'<ul class="select" ><li class="medify" id="mdf">编辑</li><li class=delete id="del">删除</li></ul></li>'; var fillList=function(){var str='';for(let i=0;i<list.length;i++){if(list[i]==null){continue;}str=str+tpl.replace('{%content%}',list[i].content).replace('{%index%}',i);// console.log(str);}ul.innerHTML=str;}var savelist=function(){localStorage.setItem('listData',JSON.stringify(list));}var getlist=function(){var localList=localStorage.getItem('listData');//获取本地存储的数据localList=JSON.parse(localList);//解析本地存储数据的字符串return localList; }var main=function(){if(localStorage.getItem('listData')){list=getlist();          }else {list=[];}fillList();}main();


至于这个便签是怎么添加的，用好绑定事件等操作就可以完成！代码我就不写了！

2、删除便签（本地存储中也要删除这项数据)

select[i].children[1].addEventListener('click',function(e){ul.removeChild(e.target.parentElement.parentElement);  var=e.target.parentElement.parentElement.getAttribute('key');         deleteLocalData(index);var deleteLocalData=function(index){//删除数据后把对应的本地数据改为nulllist[index]=null;console.log(list);localStorage.removeItem('listData');savelist();
}

3、修改便签（依然要跟本地数据联系起来）

  • 这里有些小细节可以增加用户的体验，比如说用户想要编辑修改的时候，你可以让他在具有原本内容的文本框里修改，这样就可以方便那些只想修改个别字的用户使用！还有编辑之后新内容要显示在便签的最顶上（因为是最接近当前时间操作的）这些操作也更加地贴近我们的生活！
 select[i].children[0].addEventListener('click',function(e){var index1=e.target.parentElement.parentElement.getAttribute('key');text.value=list[index1].content;cancel.style.display='none';text.parentElement.style.display='block';ul.removeChild(e.target.parentElement.parentElement);deleteLocalData(index1);})    var deleteLocalData=function(index){//删除数据后把对应的本地数据改为nulllist[index]=null;console.log(list);localStorage.removeItem('listData');savelist();}

if(localStorage.getItem('listData')!=null){fn();}finish.onclick = function () {if (text.value === '') {alert('您还没有输入内容，不可保存！');//输入验证return false;} else {cancel.style.display = 'block';var obj={content:text.value}list.unshift(obj);text.value='';text.parentElement.style.display = 'none';savelist();//将用户新添加的数据保存到本地fillList();//重新渲染fn();         }}

4、通过关键字查找便签（你们应该知道这个括号里面要填什么了，hh）

var find_img = document.querySelector('.find_img');var abolish=document.querySelector('.abolish');find_img.onclick = function () {if(find.value==='搜索...'){alert('搜索值不可为空！');return;}abolish.style.display="block";var str = find.value;//记录查找值var localdata1=localStorage.getItem('listData');//获取本地数据var localdata2=localdata1;str= localdata1.split(str).join("<span class='str'>" + str + "</span>");//将关键的字符用span分割，以便后面换bgclocalStorage.removeItem('listData');//清空本地数据localStorage.setItem('listData',str);//添加本地数据list= getlist();//将本地数据用JSON.parse解析后赋值为数组fillList();//渲染数组fn();//使其保持原本功能的函数localStorage.removeItem('listData');//清空本地数据localStorage.setItem('listData',localdata2);//添加本地数据list=getlist();}

hjh，没想到写着写着就那么晚了，我也刚学习前端没多久，上述做法肯定不是最优的，写这个博客的目的主要还是记录下做这个项目的过程，希望大家有更好的想法可以一起交流！

如何使用前端DOM操作制作一个便签：相关推荐

  1. 如何在电脑桌面上制作一个便签

    在电脑上记事,用的都是便签软件.如果你的电脑上没有便签软件,该如何在电脑桌面上制作一个便签出来呢? 如果没两把刷子,还真没本事亲自制作一个便签软件出来,如果想用便签,还是用别人制作出来的便签软件吧. ...

  2. VUE+Express+MongoDB前后端分离，实现一个便签墙（一）

    计划来实现一个便签墙系列,这个东西做简单也简单,往复杂了做功能也很多,记录一下从零到有的开发过程吧,希望最后能把这个项目做得很完善. 首先是前后端分离架构,前端用vue,后台我们就用express,数 ...

  3. 电脑桌面便签_在电脑桌面使用敬业签怎么操作退出团队便签？

    使用敬业签团队便签协作办公时,团队内拥有查看权限的成员可实时查看团签上新增的待办事项:作为团队便签中的一员,如果被调动到其它岗位,加入的团签无法辅助安排工作,就可以退出团队便签,下面以教程的形式,给大 ...

  4. java写便签_如何编写一个便签程序（用Java语言编写）

    如何编写一个便签程序(用Java语言编写) 热度:336   发布时间:2011-02-18 11:44:16 如何编写一个便签程序(用Java语言编写) 因为以前没有好好学习Java,都搞忘了,请大 ...

  5. 怎么在电脑桌面上创建一个便签记事 方便用的时候及时打开

    对于整天对着电脑工作的人来说,看似坐在办公室里很舒服,其实每天都有一大堆事情要处理.事情做久了难免头晕眼花,一不小心还会忘做某件事.这个时候就非常尴尬了,领导批评自己会感到委屈,但是自己忘做某项工作确 ...

  6. 怎么在电脑桌面上创建一个便签把东西记在上面

    说到记事,离不开便签软件.便签是记事的主要工具之一,如果想在电脑桌面上记事,该怎么在电脑桌面上创建一个便签,把重要的事情记录到上面呢? 电脑一般有自带的便签,就是便笺贴.用户可以在开始菜单里找到便笺图 ...

  7. python2.7+PyQt5 制作桌面便签小程序

    初学PyQt5,尝试制作了如图所示桌面便签小程序,功能比较单一. 现按以下顺序记录: 一.PyQt5的安装 二.程序 三.打包 #################################### ...

  8. python制作桌面小程序_python2.7+PyQt5 制作桌面便签小程序

    初学PyQt5,尝试制作了如图所示桌面便签小程序,功能比较单一. 现按以下顺序记录: 一.PyQt5的安装 二.程序 三.打包 #################################### ...

  9. 五一节后收心大法,一个便签让满血复活

    五一节放假五天,时间不算很长可也不短.如果五一假期玩嗨了,到了上班的时候,状态难免不佳.有的人甚至疲倦.昏昏欲睡.难以集中精神.肌肉酸痛.心情烦躁.容易发怒甚至根本不想上班!这叫节后综合症,为了避免自 ...

最新文章

  1. ***博客系统文章的数据库存储方式
  2. bootstrape实战案例_第二百五十二节，Bootstrap项目实战-首页
  3. 启用Visual Studio 对jQuery的智能感知
  4. exchange server 2003 安装过程中的一个问题
  5. 集美大学1414班软件工程个人作业2——个人作业2：APP案例分析
  6. 力扣-二叉树的层序遍历
  7. c# 添加防火墙例外端口_C#添加删除防火墙例外（程序、端口）
  8. 消息称字节跳动正在开发一款类Clubhouse应用
  9. 编写HTML代码常见错误以及解决方法？
  10. 多媒体实时交互系统主要由系统服务器,多媒体设备和多媒体交互系统专利_专利申请于2017-03-08_专利查询 - 天眼查...
  11. pragma pack对齐方式详细介绍
  12. 安装oracle数据库过程中系统表空间,Oracle数据库安装及配置
  13. 20182319彭淼迪第一周学习总结
  14. 双冠家园新版腾讯QLV格式转换器，qlv格式转MP4，支持新版客户端
  15. 沉迷于网络的人数_一个沉迷于追求的搜索者
  16. 用styler更改样式后，解决数据框中数据无法保留四位小数
  17. 2020十大科技趋势展望
  18. [附源码]java毕业设计基于的高校学生考勤管理系统
  19. 米扑科技助力公益：寻找失踪儿童一起回家
  20. iOS第三方支付(支付宝SDK)

热门文章

  1. 资料(http://blog.csdn.net/bogues/archive/2005/11/22/534982.aspx)
  2. DataStore入门及在项目中的使用
  3. 什么是p-value
  4. 经典英语爱情表白句子
  5. 2020年10款实用的电脑软件大盘点，强烈推荐！
  6. java身份证号码验证算法
  7. php 屏蔽curl访问,php curl指定ip,php curl请求忽略本地host文件,php curl请求跳过本地host文件...
  8. 售后派工单，这样子做，高效又便捷
  9. Word2010目录问题
  10. 对ansys主要命令的解释