前端常用代码块

　　在有空的时候整理一下常用的代码，帮助日常开发，提高开发效率。代码片段如下所示：

1、判断是否是移动端

var isApp = function() {
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        return true;
    } else {
        return false;
    }
}

2、鼠标移入移出效果

window.addEventListener('load', function() {
    var box = document.querySelector('.box');
    box.addEventListener('mouseover', function() {
        box.classList.add('cur');
    });
    box.addEventListener('mouseleave', function() {
        box.classList.remove('cur');
    });
});

3、input获得失去焦点

window.addEventListener('load', function() {
    var inp = document.querySelector('input');
    if(inp.value === '手机号'){
        inp.style.color = '#888';
    }else{
        inp.style.color = '#333';
    }

    inp.focus = function(){
        if(this.value === '手机号'){
            this.value = '';
            this.type = 'password';
            this.style.color='#333';
        }else{
            this.style.color = '#333';
        }
    }
    inp.blur = function(){
        if(this.value == ''){
            this.value = '手机号';
            this.style.color = '#888';
            this.type = 'text';
        }
    }
});

4、验证码倒计时

 var time = 60;
 timer = null;
 var sendBtn = document.getElementById('send_btn');
 sendBtn.addEventListener('click', function() {
     timer = setInterval(function() {
         time--;
         if (time <= 0) {
             sendBtn.innerHTML = '发送验证码';
             clearInterval(timer);
             sendBtn.setAttribute('disabled', false);
             time = 60;
         } else {
             sendBtn.innerHTML = time + '秒后重试';
             sendBtn.setAttribute('disabled', true);
         }
     }, 1000)
 });

5、计算当前日期

function caculateDate() {
    var d = new Date();
    var weeks = ['日', '一', '二', '三', '四', '五', '六'];
    var yy = d.getFullYear();
    var mm = d.getMonth() + 1;
    var dd = d.getDate();
    var week = weeks[d.getDay()];
    return yy + '年' + mm + '月' + dd + '日 星期' + week;
}

6、清除浮动

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

7、移动端遮罩层隐藏及显示效果

.cover{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    -webkit-transform: translate3d(0,200%,0);
    -moz-transform: translate3d(0,200%,0);
    -ms-transform: translate3d(0,200%,0);
    -o-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.cover.moved{
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

 8、移动端弹层滚动卡顿解决方案

-webkit-overflow-scrolling: touch;overflow-scrolling: touch;

 9、优雅地回到目标区域

 $('html,body').animate({'scrollTop': $(obj).position().top},500);

 10、360浏览器对jsjq不兼容的解决方案

1)用极速核：

<meta name="renderer" content="webkit"> 

2)用ie兼容内核：

<meta name="renderer" content="ie-comp"> 

3）用ie标准内核：

<meta name="renderer" content="ie-stand">

4)jquery 2.x版本不支持ie6,7,8. 所以对应ie浏览器中是不能使用jquery 2.x的。

搜狗、360等国内浏览器的兼容模式采用较低版本的ie内核，所有这些浏览器在兼容模式下不兼容jquery 2.x，项目可以采用最新版的jq或者2.x以上。

jquery cdn地址链接