<!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. Android之Handler源代码深入解析

    闲着没事.就来看看源代码,看看源代码的各种原理,会用仅仅是简单的,知道为什么才是最牛逼的. Handler源代码分析那,从使用的步骤来边用边分析: 1.创建一个Handler对象:new Handle ...

  2. 设计模式 - 组合模式(composite pattern) 迭代器(iterator) 具体解释

    组合模式(composite pattern) 迭代器(iterator) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy 參考组合模式(composit ...

  3. D3.js 整体展示篇

    近期一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这片荒漠一筹莫展的自己,幸好发现了D3这片充满活力的绿洲.我决定在这块宝地贪婪地大餐一番. 本文介绍主要来自官网翻译及用户使用后感想资 ...

  4. modSecurity规则学习（六）——检测模式

    传统检测模式-自主规则 传统检测模式所有规则都是“闭环”的模式.就像HTTP本身一样,单独的规则是无状态的.这意味着规则之间不共享信息,每个规则都没有关于任何先前规则匹配的信息.它仅使用其当前的单个规 ...

  5. IOC DI 专题

    IoC:Inversion of Control,控制反转DI:Dependency Injection,依赖注入 要理解上面两个概念,就必须搞清楚如下的问题: 参与者都有谁?依赖:谁依赖于谁?为什么 ...

  6. 版本控制Git（1）——理解暂存区

    一.svn和Git的比较 我们都知道传统的源代码管理都是以服务器为中心的,每个开发者都直接连在中间服务器上, 本地修改,然后commit到svn服务器上.这种做法看似完美,但是有致命的缺陷. 1. 开 ...

  7. codeforces 710C Magic Odd Square(构造或者n阶幻方)

    Find an n × n matrix with different numbers from 1 to n2, so the sum in each row, column and both ma ...

  8. webstorm配置less解析的方法

    1.安装node.js 2.npm 安装less, npm install -g less 2.1 lessc style.less styles.css 编译 2.2 lessc –clean-cs ...

  9. 学习NLP:《精通Python自然语言处理》中文PDF+英文PDF+代码

    自然语言处理是计算语言学和人工智能之中与人机交互相关的领域之一. 推荐学习自然语言处理的一本综合学习指南<精通Python自然语言处理>,介绍了如何用Python实现各种NLP任务,以帮助 ...

  10. C++里的模板

     1.泛型编程 --即实现一个通用的标准容器库. 所谓通用的标准容器库,就是要做到:比方List类存放全部肯恩类型的对象这样的事:泛型编程让你编写一个全然一般化并可反复使用的算法,其效率与针对某特定数 ...