AdiHuang

Posted 2018-01-19Note

图片上传预览, 通过file标签和js的FileReader接口

用html的file标签就能实现图片上传前预览，就是通过file标签和js的FileReader接口，把选择的图片文件调用readAsDataURL方法，把图片数据转成base64字符串形式显示在页面上。

Posted 2017-08-11Manual

Terminal 几个快捷键

将光标移动到行首

ctrl + a

将光标移动到行尾

ctrl + e

清除屏幕

ctrl + l

搜索以前使用命令

ctrl + r

清除当前行

ctrl + u

清除至当前行尾

ctrl + k

单词为单位移动

option + 方向键

Posted 2017-08-10Manual

vagrant

commond	describe
$ vagrant init	# 初始化
$ vagrant up	# 启动虚拟机
$ vagrant halt	# 关闭虚拟机
$ vagrant reload	# 重启虚拟机
$ vagrant ssh	# SSH 至虚拟机
$ vagrant suspend	# 挂起虚拟机
$ vagrant resume	# 唤醒虚拟机
$ vagrant status	# 查看虚拟机运行状态
$ vagrant destroy	# 销毁当前虚拟机
$ vagrant exit	从ssh退出
cd /var/www/astellas/docroot/ && drush cr	清理缓存
cd /var/www/astellas/ && composer update	模块升级

Posted 2017-06-12Manual

linux常用命令

文件、目录类

cd                                # 返回 home 目录（相当于cd ~）
cd ..                             # 返回上一级目录
cd -                              # 返回上一次所在目录,并显示其目录名
cd xxx                            # 进入到指定目录xxx
pwd                               # 显示当前目录的绝对路径
ls -l                             # 列出文件的详细信息，相当于（ll）
ls | grep "xxx"                   # 列出包含 "xxx" 关键字的文件
mkdir dir                         # 创建一个目录
mkdir -p dir/dir                  # 创建多级目录
mkdir -m 777 dir                  # 创建权限为 777 的目录
touch file                        # 创建新的空文件
rmdir dir                         # 删除空目录
rmdir -p dir/bin                  # 删除子空目录 bin 和其父空目录 dir
rm -rf dir/bin                    # 删除一个目录中的一个或多个文件或目录（慎用）
rm -rf xxx *.log                  # 删除当前目录下所有 ".log" 的文件（慎用）
find fileName -name  *.txt | xargs rm -rf   # 将查找出来的文件全部删除（慎用）
cp file dir/file                  # 将文件拷贝到另一文件中
cp -R dir1 dir2                   # 拷贝多个目录 (含子目录) 到指定目录
mv dir1 dir2                      # 将文件或目录重新命名,或者将文件从一个目录移到另一个目录中

Posted 2017-05-24Manual

homebrew升级更新卸载常用命令

一般来说如果你追求新版本（不升级不舒服斯基），那么你最常用的操作序列就是这样：

brew update                 # 更新 Homebrew 的信息
brew outdated               # 看一下哪些软件可以升级
brew upgrade <xxx>          # 如果不是所有的都要升级，那就这样升级指定的

brew upgrade; brew cleanup  # 如果都要升级，直接升级完然后清理干净

brew uninstall <package>    # 卸载<package>
brew autoremove             # 移除所有未使用的依赖项

Posted 2017-05-09Note

点击倒计时countdown

// countdown
var $timeBox = $(".btn-verify"),
  setTime = 5, //set second
  paramTime,
  Message = {
    second: '秒后获取',
    verify: '获取验证码'
  };

function funTimeout() {
  paramTime--;

  $timeBox.html(paramTime + Message.second); //show

  if (paramTime == 0) {
    $timeBox.addClass('able').html(Message.verify);
  } else {
    setTimeout("funTimeout()", 1000);
  }

}

$(function () {

  $timeBox.on('click', function () {
    var $this = $(this);
    if ($this.hasClass('able')) {
      $this.removeClass('able');
      paramTime = setTime;
      funTimeout();
    }
  })

})

<div class="btn-verify able">Click</div>

Posted 2017-04-28Note

自定义字体 @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Posted 2017-03-21Manual

Git使用摘要

Git是一个“分布式版本管理工具”，简单的理解版本管理工具：大家在写东西的时候都用过“回撤”这个功能，但是回撤只能回撤几步，假如想要找回我三天之前的修改，光用“回撤”是找不回来的。而“版本管理工具”能记录每次的修改，只要提交到版本仓库，你就可以找到之前任何时刻的状态（文本状态）。

下面的内容就是列举了常用的Git命令和一些小技巧，可以通过”页面内查找”的方式进行快速查询：Ctrl/Command+f。

Posted 2017-01-14Note

当弹出popup悬浮层时，禁止body滚动

示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>test</title>
<style>
p { line-height: 110px; }
.btn { position: fixed; top: 10px; right: 10px; z-index: 9; padding: 5px 10px; color: #fff; background: #c00; }
.mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.5); z-index: 99; display: none; }
.popup { position: fixed; top: 0; right: 0; bottom: 0; left: 40px; background: #fff; z-index: 101; overflow-y: auto; display: none; }
</style>
</head>
<body>
  <div class="btn">Click</div>
  <div class="main"><p>111</p><p>222</p><p>333</p><p>444</p><p>555</p><p>666</p><p>777</p><p>888</p><p>999</p></div>
  <div class="mask"></div>
  <div class="popup"><p>111</p><p>222</p><p>333</p><p>444</p><p>555</p><p>666</p><p>777</p><p>888</p><p>999</p></div>
</body>
<script src="jquery-1.10.1.min.js"></script>
</html>
<script>
var $body = $('body'),
    scrollTop;

$('.btn').on('click', function() {
  $('.mask, .popup').show();
  scrollTop = $body.scrollTop(); //body设置为fixed之后会飘到顶部，所以要动态计算当前用户所在高度
  $body.css({
      'overflow':'hidden',
      'position': 'fixed',
      'top': scrollTop*-1
  });
});

$('.mask').on('click', function() {
  $('.mask, .popup').hide();
  /*取消后设置回来*/
  $body.css({
      'overflow':'auto',
      'position': 'static',
      'top': 'auto'
  }).animate({ scrollTop: scrollTop }, 0);
});

</script>

Posted 2016-12-06Note

sass - Retinal屏border显示1px

@mixin border($top, $right, $bottom, $left, $color:#f00) {
  content: " ";
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  color: $color;
  $position: '';
  $transform-origin: '';
  $scale: '';
  @if $top == 'auto' or $bottom == 'auto' {
    height: 1px;
    $scale: 1, .5;
  }
  @else if $left == 'auto' or $right == 'auto' {
    width: 1px;
    $scale: .5, 1;
  }
  @if $top == 'auto' {
    $position: bottom;
    $transform-origin: 0 100%;
  }
  @else if $right == 'auto' {
    $position: left;
    $transform-origin: 0 0;
  }
  @else if $bottom == 'auto' {
    $position: top;
    $transform-origin: 0 0;
  }
  @else if $left == 'auto' {
    $position: right;
    $transform-origin: 100% 0;
  }
  border-#{$position} : 1px solid $color;
  -webkit-transform-origin: $transform-origin;
  transform-origin: $transform-origin;
  -webkit-transform: scale($scale);
  transform: scale($scale);
  z-index: 1;
}
.demo {
  position: relative;
  &:before {
    @include border(0, 0, auto, 0, #666);  // top, right, bottom, left, color
  }
}