glup 实现 实时重载刷新

2019-03-05

安装依赖

1
2
npm init //初始化 项目
npm install --save-dev browser-sync gulp //安装必要依赖

Read More

Regular expression

2019-02-28

以分割URL为例，记录一点正则表达式的用法～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url = "http://www.ora.com:80/goodparts?q#fragment";
var result = parse_url.exec(url);
var names = ['url','scheme','slash','host','port','path','query','hash'];
var blanks = '        ';
for (var i = names.length - 1; i >= 0; i--) {
	console.log(names[i] + ':' + blanks.substring(names[i].length), result[i])
}
这段代码产生如下结果：
hash:     fragment
query:    q
path:     goodparts
port:     80
host:     www.ora.com
slash:    //
scheme:   http
url:      http://www.ora.com/goodparts?q#fragment

Read More

SVG实现可控圆环进度条 扫描效果

2019-02-26

移动端做一个 loadiing 加载的图标，跟以往沿用的都不太一样，是一个圆环进度条，圆环进度条也就罢了，还得能用百分比控制。

具体思路是 使用svg + css3 动画实现进度条的效果，代码如下：

1
2
3
4
<svg class="svg" xmlns="http://www.w3.org/200/svg" height="150" width="110">
    <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round"/>
    <circle class="progress_circle" id="J_progress_bar" cx="55" cy="55" r="50" fill="none" stroke-dasharray="" stroke="#4cc4fc" stroke-width="15"/>
</svg>

Read More

License

2019-02-25

2019-3-15 storm(另一种激活方法，选中间的activetion code)：

前提：修改本地的hosts配置文件（/etc/hosts）
最后一行新增这句话：0.0.0.0 account.jetbrains.com
然后去 http://idea.lanyus.com/ 这个网站生成一个激活码放在打开的activetion code里面即可

Read More