JS / CSS 实现的便签记录本
<!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">×</span></li>
<li class="content">CSS<span class="close">×</span></li>
<li class="content">JS <span class="close">×</span></li>
<li class="content">NODE.JS <span class="close">×</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 实现的便签记录本的更多相关文章
- CSS3+JS 实现的便签应用
概述 利用HTML5新增的 locationStorage 实现的便签应用,没有使用 JQuery,主要是为了练习原生JS的使用,采用响应式开发,在手机端和桌面端都有良好的体验,而且使用CSS3添加了 ...
- js便签笔记（12）——浏览TOM大叔博客的学习笔记 part2
1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭 ...
- js便签笔记（2）——DOM元素的特性（Attribute）和属性（Property）
1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...
- ios UIWebView截获html并修改便签内容（转载）
ios UIWebView截获html并修改便签内容 博客分类: iphone开发iphone开发phoneGap uiwebviewstringByEvaluatingJavaScriptFromS ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...
- 20151217JS便签
JS便签: 根据一个数值来改变Repeater行数的颜色 <script type="text/javascript"> var query = document.ge ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)
ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...
- 史上前端面试最全知识点（附答案）---html & js & css
史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...
- maven压缩js css
maven压缩<plugin> <!-- YUI Compressor Maven压缩插件 --> <groupId>net.alchim31.maven</ ...
随机推荐
- Qt 5.3 下OpenCV 2.4.11 开发（0）图像处理基本概念
1.普通情况下的RGB彩色图像:它的每一个像素点都是由三个通道组成,即红色(R).绿色(G)和蓝色(B).8位三通道彩色图像就是每一个像素中每一个通道的取值范围都是 0~255(即二进制下的8位数), ...
- Android ImageView设置图片原理（下）
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 写完上一篇后,总认为介绍的知识点不多,仅仅是一种在UI线程解析载入图片.两种在子线程解析,在UI线程 ...
- volatile的含义
从词面上来讲.volatile的意思是易变的,也就是说.在程序执行的过程中,有一些变量可能会被莫名其妙的改变,而优化器为了节约时间.有时候不会重读这个变量的真实值,而是去读在寄存器的备份,这种话,这个 ...
- BZOJ2668: [cqoi2012]交换棋子(费用流)
Description 有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子(相邻是指有公共边或公共顶点)中的棋子,最终达到目标状态.要求第i行第j列的格子只能参与mi,j次交换. Input 第一行 ...
- android对话框显示异常报错：You need to use a Theme.AppCompat theme (or descendant) with this activity.
今天写android实验碰到到一个问题,在用AlertDialog.Builder类构建一个对话框之后,调用Builder.show()方法时抛出异常如下: - ::-/xyz.qlrr.sqlite ...
- 详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库:https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体说 ...
- 洛谷 P2913 [USACO08OCT]车轮旋转Wheel Rotation
P2913 [USACO08OCT]车轮旋转Wheel Rotation 题目描述 Farmer John has an old-time thresher (wheat harvester) tha ...
- cogs 32. [POI1999] 位图
32. [POI1999] 位图 ★ 输入文件:bit.in 输出文件:bit.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述 ] 给定一个 n*m 的矩形位图, ...
- swift 编译提前定义 --不知道怎么定义，可是能够#if
var v:Int; #if _COND//不知道怎么定义.可是能够#if v = ; #else ; #endif println(v);//2
- 将Firefox设置为使用远程DNS
将Firefox设置为使用远程DNS 原文 https://www.my-proxy.com/blog/firefox-remote-dns 测试当前在用DNS https: ...