CSS3+JS 实现的便签应用

桃扇骨 2022-05-31 08:21 257阅读 0赞

# 概述 #

利用HTML5新增的 locationStorage 实现的便签应用，没有使用 JQuery，主要是为了练习原生JS的使用，采用响应式开发，在手机端和桌面端都有良好的体验，而且使用CSS3添加了大量的动画效果，使各操作之间的连接更加流畅。

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10440.html][http_www.demodashi.com_demo_10440.html] ####

#### 一、准备工作 ####

1、开发工具Sublime+一个能打开网页的现代浏览器

3、使用 localStorage 存储便签

#### 二、程序实现 ####

1、首先，我们创建三个目录，第一个目录是 css ，用于存放 css 样式文件。第二个目录是 images ，用于存放程序中使用到的图标。第三个目录是 js ，用于存放程序中使用到的 js 文件，当然还有一个 index.html 存放在根目录下。

2、程序的实现思路很简单，我们只要在js中完成三个功能即可：

第一，就是获取DOM元素，用于为页面中的控件设置动作。

第二，建立 Note 控制中心，用于控制便签的存储，读取，修改和删除。

第三，页面初始化。

3、在讲代码之前，我们首先看看整个程序的运行效果。

![display.png][]

HTML代码：其结构也很简单，在刚开始没有便签记录的时候，只需要有一个文本输入框和一个保存按钮即可，然后为便签记录设置一个无序列表，并且在 CSS 中为其制定样式，下面是我的 HTML 结构

CSS 代码主要关注三点：

第一点：样式重置，在这里使用了 normalize

第二点：动画效果，在删除便签，添加便签，编辑便签，删除便签时都有动画效果，这主要是为了改善用户体验

第三点：针对响应式，我这里设置的也比较简单，就是针对屏幕分辨率低于 700px 的时候，改变便签列表的宽度，以达到适应屏幕的效果。

@media only screen and (max-width: 700px) {
    	#task-container, aside#task-detail .detail-container{
    		width: 90%;
    	}
    
    	aside#task-detail .detail-container {
    		padding: 12px 8px;
    	}
    
    	#delete-container {
    		width: 80%;
    	}
    }

还有一点值得注意的是，每个便签目录以一行的形式显示，如果字数超过一行该怎么办呢？很普遍的，大家都把超出的那部分用省略号代替，其核心代码如下所示

white-space: nowrap;
    	text-overflow: ellipsis;
    	overflow: hidden;

JS实现：关于JS 的实现，我们上面提到了需要关注三点，下面就来讲讲这三点的核心实现：

第一点，关于DOM元素如何获取就不在详细说了，直接使用 document.getElementById(name) 即可，关键是各个浏览器对事件的设置是不同的，所以为了兼容 Netscape 和 IE 阵营，我们需要手写兼容代码，毕竟我们没有使用 JQuery。

第二点就是建立便签的控制中心，其实也很简单，只不过是 localStorage 的几个 api 使用而已，最主要的还是 setItem 和 getItem。

还有一点值得注意的是，上面的代码只是我们书写了自己使用的 api ，至于各个按钮的监听控制程序，还需要另外书写程序代码，比如我们监听保存按钮的事件需要像下面这样书写。

#### 三、运行效果 ####

下载附件后，双击index.html即可运行。

首先，看看该程序各个部分的截图

![1498623645761093323.png][]

![1498623645804022689.png][]

![1498623645823029814.png][]

如果你觉得还不过瘾，你可以在线体验，体验地址如下：https://hwaphon.github.io/Html5LocalStorage/2.0/index.html

#### 四、其他补充 ####

1.  关于每个便签目录的信息编辑，注意考虑闭包问题。
2.  注意动态设置 input placeholder 的颜色
3.  为了支持手机端，别忘记在 html 文件中添加如下代码

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10440.html]: http://www.demodashi.com/demo/10440.html
[display.png]: /images/20220531/21700046d34540f1bb4762ea1c43cd47.png
[1498623645761093323.png]: /images/20220531/08ea631c9a5d4eefb0f11f9e681653b5.png
[1498623645804022689.png]: /images/20220531/d95cedd4573242ff91676bfc404b3f06.png
[1498623645823029814.png]: /images/20220531/8eb1b44abbcc4eacac76e42099ddc566.png
[http_www.demodashi.com]: http://www.demodashi.com/