<!doctype html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>js实现便签</title>

     <style>

       .labelstart{

   background:red;

   text-align:center;

   margin:50px 50px 0px 50px;

   padding:30px;

 }

 input{

   width:400px;

   height:25px;

   box-shadow:  3px 4px 5px grey;

   border-radius:5px;

 }

 .btn{

   cursor: pointer;

   height:30px;

   border-radius:5px;

   width:50px;

   box-shadow:  3px 4px 5px grey;

 }

 #mytab{

   background:grey;

   margin:0px 50px 50px 50px;

   padding:30px;

 }

 #mytab li{

   border-bottom:1px solid black;

   height:30px;

   cursor: pointer;

   padding:10px

 }

 #mytab  li:nth-child(odd) {

   background: lightgrey;

 }

 span{

   float:right;

   font-size:16px;

   padding:10px

 }

 span:hover{

   color:red;

   cursor: pointer;

 }

 ol li.checked {

   background: #888;

   color: #fff;

   text-decoration: line-through;

 }

 ol li.checked::before {

   content: '';

   position: absolute;

   border-color: #fff;

   border-style: solid;

   border-width: 0 2px 2px 0;

   top: 10px;

   left: 16px;

   transform: rotate(45deg);

   height: 15px;

   width: 7px;

 }

     </style>

   </head>

   <body>

     <div class="labelstart">

       <h3>

         请输入要办的事项

       </h3>

       <input type="text" id="myInput" >

       <button type="button" class="btn" onclick="add()">

          添加

       </button>

     </div>

     <Ol id="mytab">

       <li class="content">HTML<span class="close">&times;</span></li>

       <li class="content">CSS<span class="close">&times;</span></li>

       <li class="content">JS <span class="close">&times;</span></li>

       <li class="content">NODE.JS <span class="close">&times;</span></li>

     </Ol>

    <script>

      //添加标签

 function add(){

  //创建一个li标签

   var getli=document.createElement("li");

   //给li加入class

   getli.className="content";

   //创建span

   var getspan=document.createElement("span");

   var getclose=document.createTextNode("\u00D7");

   //获得input的内容

   var getinput=document.getElementById("myInput").value;

   var getcontent=document.createTextNode(getinput);

   //按顺序添加子节点

   getspan.className="close";

   getspan.appendChild(getclose);

   getli.appendChild(getcontent);

   getli.appendChild(getspan)

   var getol=document.getElementById("mytab");

   getol.appendChild(getli)

  //并且给这里的函数绑定删除事件

   getspan.onclick=function(){

     this.parentElement.style.display = "none";

   }

 }

 //给原来的标签注册删去标签事件

 var close = document.getElementsByClassName("close");

 var i;

 for (i = 0; i < close.length; i++) {

   close[i].onclick = function() {

      this.parentElement.style.display = "none";

   }

 }

 //当点击li标签时添加中划线

 var list=document.getElementById("mytab");

 list.addEventListener('click', function(ev) {

   if (ev.target.tagName === 'LI') {

     ev.target.classList.toggle('checked');

   }

 }, false);

     </script>

   </body>

 </html>

JS / CSS 实现的便签记录本的更多相关文章

  1. CSS3+JS 实现的便签应用

    概述 利用HTML5新增的 locationStorage 实现的便签应用,没有使用 JQuery,主要是为了练习原生JS的使用,采用响应式开发,在手机端和桌面端都有良好的体验,而且使用CSS3添加了 ...

  2. js便签笔记（12）——浏览TOM大叔博客的学习笔记 part2

    1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭 ...

  3. js便签笔记（2）——DOM元素的特性（Attribute）和属性（Property）

    1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...

  4. ios UIWebView截获html并修改便签内容（转载）

    ios UIWebView截获html并修改便签内容 博客分类: iphone开发iphone开发phoneGap uiwebviewstringByEvaluatingJavaScriptFromS ...

  5. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  6. 20151217JS便签

    JS便签: 根据一个数值来改变Repeater行数的颜色 <script type="text/javascript"> var query = document.ge ...

  7. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  8. 史上前端面试最全知识点（附答案）---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  9. maven压缩js css

    maven压缩<plugin> <!-- YUI Compressor Maven压缩插件 --> <groupId>net.alchim31.maven</ ...

随机推荐

  1. CSS元素选择器 element selector(type selector)

    http://www.w3school.com.cn/css/css_selector_type.asp 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如 ...

  2. Android活动状态和生存期

    活动状态 1.运行状态(顶层的活动) 2.暂停状态(非顶层的,可见的活动) 3.停止状态(非顶层的,不可见的活动) 4.销毁状态(保证手机的内存充足) 活动的生存期 完整的生存期 onCreate活动 ...

  3. 如何快速复制Windows警告提示消息对话框内容

    凡是使用过计算机的朋友,都遇到过系统发出的警告提示消息对话框,如图所示. 哇!好长的一串英文错误警告,这要手写到什么时候呢?不!现在不用这么麻烦了. 你只要鼠标选中这个提示框Ctrl+C,然后打开你的 ...

  4. SQL Server 多种分页查询效率

    关于SQL语句分页,网上也有很多,我贴一部分过来,并且总结自己已知的分页到下面,方便日后查阅. 方法1 适用于 SQL Server 任何版本 SELECT TOP 页大小 * FROM table1 ...

  5. Codefroces A. Saitama Destroys Hotel

    A. Saitama Destroys Hotel time limit per test 1 second memory limit per test 256 megabytes input sta ...

  6. [USACO07JAN]平衡的阵容Balanced Lineup RMQ模板题

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 50000 + ...

  7. flex 光标(CursorManager)

    flex 光标(CursorManager)  CursorManager相关属性   getInstance():ICursorManager AIR 应用程序中的每个 mx.core.Window ...

  8. vue踩坑- 报错npm ERR! cb() never called!

    在vue项目中引入饿了么elementUI组件的步骤之中,出现以下的错误: D:\my-project-first>npm i element-ui -S Unhandled rejection ...

  9. P2P进入整顿期，平衡风险和收益之间的矛盾是关键

        毫无疑问,P2P网贷进入了其诞生以来最为关键的整顿期,随着大量提现困难.跑路的P2P平台被曝光之后.行业对P2P网贷的发展也多了几分慎重.少了几分浮躁.只是,P2P网贷所面临的问题正是其它不论 ...

  10. vim 基础学习之插入模式

    插入模式1.字符编码,插入特殊字符 <C-v>{3位} 如,你想输入A,你可以在输入模式下<C-v>065(必须是3位) <C-v>u{4位} 如,你想输入¿,你可 ...