1.  <!doctype html>
  2.  <html>
  3.    <head>
  4.      <meta charset="utf-8">
  5.      <title>js实现便签</title>
  6.      <style>
  7.        .labelstart{
  8.    background:red;
  9.    text-align:center;
  10.    margin:50px 50px 0px 50px;
  11.    padding:30px;
  12.  }
  13.  input{
  14.    width:400px;
  15.    height:25px;
  16.    box-shadow:  3px 4px 5px grey;
  17.    border-radius:5px;
  18.  }
  19.  .btn{
  20.    cursor: pointer;
  21.    height:30px;
  22.    border-radius:5px;
  23.    width:50px;
  24.    box-shadow:  3px 4px 5px grey;
  25.  }
  26.  #mytab{
  27.  
  28.    background:grey;
  29.    margin:0px 50px 50px 50px;
  30.    padding:30px;
  31.  }
  32.  #mytab li{
  33.    border-bottom:1px solid black;
  34.    height:30px;
  35.    cursor: pointer;
  36.    padding:10px
  37.  }
  38.  #mytab  li:nth-child(odd) {
  39.    background: lightgrey;
  40.  }
  41.  span{
  42.    float:right;
  43.    font-size:16px;
  44.    padding:10px
  45.  
  46.  }
  47.  span:hover{
  48.    color:red;
  49.    cursor: pointer;
  50.  }
  51.  ol li.checked {
  52.    background: #888;
  53.    color: #fff;
  54.    text-decoration: line-through;
  55.  }
  56.  
  57.  ol li.checked::before {
  58.    content: '';
  59.    position: absolute;
  60.    border-color: #fff;
  61.    border-style: solid;
  62.    border-width: 0 2px 2px 0;
  63.    top: 10px;
  64.    left: 16px;
  65.    transform: rotate(45deg);
  66.    height: 15px;
  67.    width: 7px;
  68.  }
  69.  
  70.      </style>
  71.    </head>
  72.    <body>
  73.      <div class="labelstart">
  74.        <h3>
  75.          请输入要办的事项
  76.        </h3>
  77.        <input type="text" id="myInput" >
  78.        <button type="button" class="btn" onclick="add()">
  79.           添加
  80.        </button>
  81.  
  82.      </div>
  83.      <Ol id="mytab">
  84.        <li class="content">HTML<span class="close">&times;</span></li>
  85.        <li class="content">CSS<span class="close">&times;</span></li>
  86.        <li class="content">JS <span class="close">&times;</span></li>
  87.        <li class="content">NODE.JS <span class="close">&times;</span></li>
  88.      </Ol>
  89.  
  90.     <script>
  91.  
  92.       //添加标签
  93.  
  94.  function add(){
  95.   //创建一个li标签
  96.    var getli=document.createElement("li");
  97.    //给li加入class
  98.    getli.className="content";
  99.    //创建span
  100.    var getspan=document.createElement("span");
  101.  
  102.    var getclose=document.createTextNode("\u00D7");
  103.    //获得input的内容
  104.    var getinput=document.getElementById("myInput").value;
  105.    var getcontent=document.createTextNode(getinput);
  106.    //按顺序添加子节点
  107.    getspan.className="close";
  108.    getspan.appendChild(getclose);
  109.    getli.appendChild(getcontent);
  110.    getli.appendChild(getspan)
  111.    var getol=document.getElementById("mytab");
  112.    getol.appendChild(getli)
  113.   //并且给这里的函数绑定删除事件
  114.    getspan.onclick=function(){
  115.      this.parentElement.style.display = "none";
  116.    }
  117.  }
  118.  
  119.  //给原来的标签注册删去标签事件
  120.  
  121.  var close = document.getElementsByClassName("close");
  122.  var i;
  123.  for (i = 0; i < close.length; i++) {
  124.    close[i].onclick = function() {
  125.       this.parentElement.style.display = "none";
  126.  
  127.    }
  128.  }
  129.  //当点击li标签时添加中划线
  130.  var list=document.getElementById("mytab");
  131.  list.addEventListener('click', function(ev) {
  132.    if (ev.target.tagName === 'LI') {
  133.      ev.target.classList.toggle('checked');
  134.    }
  135.  }, false);
  136.  
  137.      </script>
  138.    </body>
  139.  </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. Haproxy压测

    目的:测试Haproxy压测情况 环境: Ha服务器:8核16G虚机,后端6个2核4G,压测客户端3个2核4G 安装和优化: 一.Haproxy #cd /opt/soft #wget http:// ...

  2. WITH common_table_expression (Transact-SQL)

    https://docs.microsoft.com/en-us/sql/t-sql/queries/with-common-table-expression-transact-sql Specifi ...

  3. oh-my-zsh upgrade problem

    Oh-My-ZSH upgrade issue with bad substitution message   Any problem with automatic Oh-My-Zsh upgrade ...

  4. kafka offset的存储问题

    注意:从kafka-0.9版本及以后,kafka的消费者组和offset信息就不存zookeeper了,而是存到broker服务器上,所以,如果你为某个消费者指定了一个消费者组名称(group.id) ...

  5. uni-app 地图初用 map

    一.uni-app 地图初用 map 代码如下: <template> <view> <!-- <page-head :title="title" ...

  6. COWRUN

    USACO COWRUN 随机化搜索+双重递归调用 题面描述:给出8*N(<=14)组牌,每次按顺序选择8张,FJ可以选择前4张或者后4张,COW从FJ选出的牌中选择前两张或者后两张,然后COW ...

  7. qt hex to dec

    QString s = "32FE12AD";        quint8 u8vlaue = 0;        sscanf(s.toStdString().c_str(),  ...

  8. POJ——T 2299 Ultra-QuickSort

    http://poj.org/problem?id=2299 Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 62894   ...

  9. c++位运算符介绍

    下面是C/C++位操作运算符列表,其中运算符优先级为从上到下递减,但<<,>>优先级相同. C/C++位操作运算符 操作符 功能 用法 ~ 位求反 ~expr << ...

  10. Zabbix + Grafana

    Grafana 简介 Grafana自身并不存储数据,数据从其它地方获取.需要配置数据源 Grafana支持从Zabbix中获取数据 Grafana优化了图形的展现,可以用来做监控大屏 Grafana ...