cc
cc copied to clipboard
ccforward
Code & Blog
# 给文本画上斑马线 就像这样，隔行换背景色（这种情况在页面中显示源码情况下比较常见）  ## 1、先画斑马线 斑马线、条纹图案用css的背景线性渐变就能实现 ``` css div { /* 水平条纹 */ background: linear-gradient(#f06 50%, #fff 0); background-size: 100% 30px; } div { /* 垂直条纹 */ background: linear-gradient(to...
# 上传七牛的chrome扩展 [仓库地址](https://github.com/ccforward/qiniu) 七牛的10G [免费云存储](http://www.qiniu.com/pricing) 一直没用，正好现在拿这个做自己的cdn图床。(其实现在付费cdn的存储和流量都超便宜) chrome扩展就是在图片上右键上传img标签里的图片，本地和远程图片都可上传。  ## 1、七牛的API接口 新版本的七牛上传 [node-sdk](http://developer.qiniu.com/code/v6/sdk/nodejs.html#io-put) 比以前简化了很多代码，更好用了 代码 [在这](https://github.com/ccforward/qiniu/blob/master/api.js) 也就20几行，很简单。 ## 2、一个HTTP服务 这一步也简单，直接 `http.createServer` 来提供一个接口获取图片的地址，然后重点就是下一步，上传图片。 ## 3、上传 1. 上传前先下载到临时目录 - 根据图片的url判断使用 http 还是 https...
# ES6 笔记三 - Promise 一个稍微复杂点的例子**_[https://github.com/ccforward/cc/blob/master/promise/example-new.js](https://github.com/ccforward/cc/blob/master/promise/example-new.js)**_ **_ES6规范确认以前，写过一个Promise的[简单实现](https://github.com/ccforward/cc/tree/master/promise)**_ Promise就是一个容器，里面保存着某个未来才会结束的事件(一个异步操作)的结果。作为一个对象，从Promise可以获取异步操作的消息。 ## 两个特点 1. 对象的状态不受外界影响。 Promise对象代表一个异步操作，有三种状态：`Pending`(进行中) `Resolved`(已完成 Fullfilled) `Rejected`(已失败)。 只有异步操作的结果，可以决定当前是哪一种状态，任何操作都无法改变这个状态。 2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。 Promise的状态改变只有两种可能：Pending -> Resolved 或者 Pending -> Rejected。 只要两种情况发生，状态就固定不会改变了，会一直保持这个结果。 通过Promise对象就可以将异步操作以同步操作的流程表达出来，避免嵌套层层回调的地狱。 ## 缺点...
# 整理下我的前端知识结构 ( Doing & ToDo ) 这些都是在做的、在学的和准备做的知识点。以概念为主，每一点拿出来都可以做很深的扩展。 ## 基础 - [JS标准库](http://javascript.ruanyifeng.com/#toc2) Object Array - OOP 面向对象 - this 原型 继承 - 闭包 - 作用域 - HTML5 语义化 - CSS3...
# 给文字加上下划线 - 《css揭秘》笔记 其实很简单： `text-decoration: underline` 或者 ``` css a[href] { border-bottom: 1px solid #333; text-decoration: none; } ``` 虽然用 border-bottom 模拟下划线可以对颜色、线宽、线型进行控制，但是明显这些下划线和文本之间的间距太大。如图：  当然可以给a标签加一个 `display:inline-block;` 再制定一个小一点的 `line-height`: ``` css...
# ES6 笔记二 [ES6 笔记一](https://github.com/ccforward/cc/issues/30) [思维导图](http://naotu.baidu.com/file/e12e2639ddc6580a75f9942556d35ffb) ## 1. 函数 ### 1.1 函数参数默认值 - 基本用法 ``` js function log(x, y='Worlds'){ console.log(x,y) } log('Hello'); // Hello, World function Poin(x=0,y=0){ this.x = x;...
# Babel的一个BUG 先看代码(Babel配置如下) ``` Babel Version 6.9.1 presets: ['es2015', 'es2015-loose', 'stage-2'], ``` ES6 代码如下： ``` js let foo = 'outer'; function bar(func = x => foo){ let foo = 'inner';...
# ES6 笔记一 [思维导图](http://naotu.baidu.com/file/e12e2639ddc6580a75f9942556d35ffb) ## 1. let const ### 1.1 let - 基本用法 ``` js { let a = 10; var b= 1; } console.log(a) // error console.log(b) // 1...
# 画个梯形 - 《css揭秘》笔记 在以前，(是以前！) 梯形确实不太好画出来啊。。。 ### 实现方案 在三维的世界中旋转一个矩形，因为透视关系，最终看到的二维图像就是一个梯形啦 `transform: perspective(.5em) rotateX(5deg);` 但是因为对整个元素进行了3D变形，所以里面的文字也变形了。有一点值得注意：**对元素使用了3D变形后，内部的变形效应是『不可逆转』的**。 但是2D变形体系下内部的逆向变形是可以抵消外部的变形效应的。 所以唯一的方法就是把变形效果作用在 **伪元素** 上。如图：  ``` css div { position: relative; width: 100px; height: 50px; margin: 20px...
新配置的云服务器（CentOS 7）安装了 lnmp 之后，要开启Mysql的远程连接，和部分端口连接： ### 1. 开启 mysql 可以远程访问权限 ``` bash flush privileges; grant all PRIVILEGES on *.* to root@'10.101.100.88' identified by 'password'; ``` 这样，所有的ip地址都可以通过设置的root账户密码进行连接 ### 2.开启端口 首先 `firewall-cmd --state`...