沧海粟

一个渲染UI的框架 react的功能其实很单一，就是负责页面渲染的功能，它的使用离不开其它工具的使用，比如数据管理工具redux，路由管理react-router等，因为react只负责UI的渲染，而与之不同的是Angular几乎不需要这些，自身已经包含了这些。 组件化 与angular以及其它mvc框架不同，使用react就会发现，它没有controller控制器，甚至它连数据 阅读全文...

随笔记录 报错 1 Absolute imports should come before relative imports 组件引用顺序不正常，应该先引用相对路径组件，再引入本地自定义组件 字符串链接，尽量不要再使用 + ，正确写法是 1 `string1-${string2}` =&g 阅读全文...

使用场景 在项目上，时常需要对一些小图标进行颜色的修改。比如现在一张黑色的信息图标，但是项目里需要的是红色的，一般的做法是使用ps把图标颜色换成红色，如果另一个页面需要黄色的，就再做一张黄色的。。。。。。（无比麻烦）。。。。。。另一种方法就是把这个信息图标做成字体，引用进来。。。。。。（为了一个小图标要做一种字体，还不如第一种呢）。。。。。。 现在这一切都将变的简单，使用css3新属性 阅读全文...

简单介绍 三角形、箭头在页面菜单、导航、甚至进度条上使用的非常多。 今天在这里给出几种用css3做出来的样式 原理 元素的border属性，两端拐角其实是梯形连接，当元素的高与宽相等时可以明显看到四个梯形，当元素的高与宽相等且为0是，就形开了四个三角形，当设置其中一边与其它三条边不同颜色时（其它三边一般设置为透明或者同背景然），就可以看到一个三角形 代码分 阅读全文...

简单介绍 IndexedDb是html5新添加的特性，目地是使本地数据能够持久性，使用户能够在线和离线访问 Web 应用程序。关于HTML5 本地数据持久性存储，除了IndexedDb，还有 localstorage，和 sessionstrorage ，它们均支持使用一个简单的键值对来存储需要的数据，但对大量结构化数据的存储及高效检索却显的无能为力。 异步API 在Indexe 阅读全文...

动态垂直居中 将父级元素设置为 display:table ,子元素设置 disable:table-cell;vertical-align:middle , 1 2 3 4 5 6 7 .box-wrap{ display:table; } .box{ disable:table-cell; vertical 阅读全文...

基本用法 ES6中const声明一个只读的常量，一旦声明，值就不能改变，所以const一旦声明变量，就必须立即初始化，不能留到以后赋值。 1 2 3 4 5 6 const PI = 3.1415; PI // 3.1415 PI = 3; // 报错 const a ; // 报错 a = 3 ; 与let相似的特点 阅读全文...

基本用法 let是ES6中新添加的命令，用来声明变量，用法类似var，但是所声明的变量，只在let命令所在的代码块内有效，如： 1 2 3 4 5 6 for(var i=0;i<1;i++){ var b = 3; let c = 4; } console.log(b); // 输出为:3 console.log 阅读全文...

使用场景 使用html5的canvas写的一个类似360清理大师那样的球形清理进度条，如下图所示 绘制过程 画外边的白色圆框 1 2 3 ctx.arc(250, 250, 100, 0, Math.PI * 2, false); ctx.strokeStyle = '#fff'; ctx.lineWidt 阅读全文...

使用场景 项目上要用到一个圆环形的进度条，同时随着值的不同，颜色也不同，但是找了很多，都是水平进度条，或者径向渐变，不满足需求。 思路 canvas的api中已提供了两种，径向和线性渐变，并没有这种环形的渐变，所以很容易画出对称渐变。但是canvas提供了使用Pattern来绘制，Pattern可以是图片等其它对像，那么这里就使用到这个api，需要使用一张环形渐变的图像来绘制非对 阅读全文...