Posted Note

点击倒计时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 Note

自定义字体 @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;
}
Read more
Posted Note

当弹出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 Note

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
  }
}
Posted Note

Javascript、Jquery获取浏览器和屏幕各种高度宽度

Javascript:

document.body.clientWidth        //网页可见区域宽(body)
document.body.clientHeight       //网页可见区域高(body)
document.body.offsetWidth        //网页可见区域宽(body)，包括border、margin等
document.body.offsetHeight       //网页可见区域宽(body)，包括border、margin等
document.body.scrollWidth        //网页正文全文宽，包括有滚动条时的未见区域
document.body.scrollHeight       //网页正文全文高，包括有滚动条时的未见区域
document.body.scrollTop          //网页被卷去的Top(滚动条)
document.body.scrollLeft         //网页被卷去的Left(滚动条)
window.screenTop                 //浏览器距离Top
window.screenLeft                //浏览器距离Left
window.screen.height             //屏幕分辨率的高
window.screen.width              //屏幕分辨率的宽
window.screen.availHeight        //屏幕可用工作区的高
window.screen.availWidth         //屏幕可用工作区的宽

Jquery:

$(window).height()                 //浏览器当前窗口可视区域高度
$(document).height()               //浏览器当前窗口文档的高度
$(document.body).height()          //浏览器当前窗口文档body的高度
$(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度 包括border padding margin
$(window).width()                  //浏览器当前窗口可视区域宽度
$(document).width()                //浏览器当前窗口文档对象宽度
$(document.body).width()           //浏览器当前窗口文档body的宽度
$(document.body).outerWidth(true)  //浏览器当前窗口文档body的总宽度 包括border padding margin
Posted Note

gulpfile.js

gulpfile.js放置在根目录下，
启动命令’gulp serve’

// 组件
gulp
browser-sync // 自动刷新

Read more
Posted Note

base.css

常用的base.css初始化样式


@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

html, body {
  color: #333;
  background: #fff;
  line-height: 1.2;
}

a {
  color: #D7171F;
}

a:hover {
  color: #D7171F;
  text-decoration: none;
}

html {
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

button,
input,
select {
  vertical-align: middle;
  outline: none;
}

textarea {
  outline: none;
  resize: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #b3b3b3;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #b3b3b3;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #b3b3b3;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #b3b3b3;
}

/*::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background-color:#fff;}
::-webkit-scrollbar-thumb{background-color:#ccc; border-radius:4px;}
::-webkit-scrollbar-thumb:hover {background-color:#ccc}
::-webkit-scrollbar-thumb:active {background-color:#ccc}*/

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
}

ol,
ul {
  list-style: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

Posted Note

retinajs使用摘要

官方文档：retinajs

注：需要准备的图片名称格式

image.png
image@2x.png
image@3x.png

现在有4种实现方式：

  1. 自动交换“img”标签的”src”路径。
  2. 在内联样式中自动交换背景图像的网址。
  3. 手动指定一个高分辨率的图像不同位置。
  4. 自动创建CSS背景图像媒体查询。
Read more
Posted Note

Retina屏幕下border 1px解决方案

retinal屏幕下@2x, @3x会使css设定好的border 1px变成2倍或者3倍。
以@2x为例，用css解决这个放大的问题（此方法能解决直线）

.scale{
  position: relative;
}
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 1px solid #ddd;
  -webkit-transform: scaleY(.5);
  -webkit-transform-origin: 0 0;
}
Posted Note

jQuery插件的基本格式写法

(function($) {

  // funName 是控件名称
  $.fn.funName = function(options) {

    // 设置默认值
    var defaults = {
      choose: 'red',
      out: '#000'
    }

    // 如果options有的话就用options，或者使用default参数
    var options = $.extend(defaults, options);

    // 遍历 return 链式操作
    return this.each(function() { // 这里的this是jQuery对象

      var $this = $(this); // 这里的this是当前循环的dom

      // 例当前dom和同级其它dom分别添加颜色属性
      $this.css('color', options.choose).siblings().css('color', options.out);

    });

  }

})(jQuery);

$(function() {
  // 调用
  $('#demo').funName({'choose':'green', 'out':'#f00'});
});
Follow

Tags

js36
css15
git7
cli6
html4
brew3
sass3
nodejs3
npm3
terminal3
ios2
retina2
meta2
linux2
markdown2
php2
regex2
hexo1
wechat1
zepto1
mysql1
react1
nvm1
sketch1
vagrant1
vue1
vim1
webpack1
×