前端问题

局部刷新
<script>

    var xmlhttp;

    if (window.XMLHttpRequest) {

        xmlhttp = new XMLHttpRequest();

    }

    else {

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                                   }

        }

        xmlhttp.open("get", "StatutoryDayCheck.aspx?dates=" + encodeURIComponent(dates), true);

        xmlhttp.send();
</script>
去除input框的内阴影以及点击时背景灰色：
input,

textarea,

select {

    -webkit-appearance: none;

    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
获取用户的input输入的内容
var name = $('.b_name').val();
判断用户输入的字节；
if(name.length==3)


弹出层用的是js动态定位（追求效率，用的以前封装的方法）
//居中显示弹出层

function popBox(id){

    var w =$(id).width();

        var h =$(id).height();

        var t = scrollY() +(windowHeight()/2)-(h/2);

        if(t<0)t=0;

    var l = scrollX()+((windowWidth())-(w))/2;

    if(l<0) l=0;

    $(id).css({left:l/20+'rem',top:t/20+'rem'});

    $(id).css('display','block');

}

//浏览器视口的高度(兼容写法-male)

function windowHeight() {

    var de = document.documentElement;

    return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;

}

//浏览器视口的宽度(兼容写法-male)

function windowWidth() {

    var de = document.documentElement;


    return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
}
弹窗的div和img自动地位在ab的靠左的document。body

弹窗div边框透明写法

.css{-webkit-background-clip: content-box;background-clip: content-box;}

背景图根据手机分辨率大小来适应高度

        1. position: relative;
        2. height: 22rem;
        3. margin: 0 auto;
        4. background: #000 url(../img/center_page/mine_bg_head@2x.png) no-repeat top center;
        5. background-size: cover;
        6. color: #fff;

移动端垂直水平居中


方法1
.center{
    width:50%;

    position: absolute;

    top: 50%;

    left: 50%;

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);
}
方法2

.center {

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-align: center;

-moz-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

-webkit-box-pack: center;

-moz-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;
}



解决移动端弹出层不适配小屏幕手机的问题
.mask{

    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9;
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
}
清除浮动
给父级加上 overflow:hidden

点击弹窗以外的地方可退出弹窗
$(".next_col1").click(function(){
    $(".mask_big").show();
    return false;//必定要加
})

$(document).click(function(){
    $(".mask_big").hide();
});

zepto移动端点击按钮之后先显示延迟5秒之后在显示弹出框！
<script language='javascript' type='text/javascript'>
$(function () {
    setTimeout(function () {
        $("divid").show();
    }, 6000);
})
</script>

在浏览器中有些a标签没有用的只是为了显示小手，一定记得不href=“#”换成href=" javascript:void(0); "
target="_self"不然在外网会出现点击无效

refresh 属性值 -- 刷新与跳转(重定向)页面

5秒之后刷新本页面:

<meta http-equiv="refresh" content="5" />

5秒之后转到××首页:

<meta http-equiv="refresh" content="5; url=http://www.baidu.com/" />

css计算器

div {
width:-webkit-calc(100%-100px);
width:-moz-calc(100%-100px);
width:calc(100%-100px);
}

类似于标签的让文字适应 加display: inline-block;就能解决啦

zepto不支持scrollTop时，返回顶部有动画的方法
function goTop(acceleration, time) {

acceleration = acceleration || 0.1;

time = time || 16;

var x1 = 0;

var y1 = 0;

var x2 = 0;

var y2 = 0;

var x3 = 0;

var y3 = 0;

if (document.documentElement) {

x1 = document.documentElement.scrollLeft || 0;

y1 = document.documentElement.scrollTop || 0;

}

if (document.body) {

x2 = document.body.scrollLeft || 0;

y2 = document.body.scrollTop || 0;

}

var x3 = window.scrollX || 0;

var y3 = window.scrollY || 0;

// 滚动条到页面顶部的水平距离var x = Math.max(x1, Math.max(x2, x3));

// 滚动条到页面顶部的垂直距离var y = Math.max(y1, Math.max(y2, y3));

// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小var speed = 1 + acceleration;

window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

// 如果距离不为零, 继续调用迭代本函数if (x > 0 || y > 0) {

var invokeFunction = "goTop(" + acceleration + ", " + time + ")";

window.setTimeout(invokeFunction, time);

}

}

$(".fix_go_top").on("click", function() {

    //$("body").scrollTop(0);

    //window.scrollTo(0,0);    goTop();
});
jq插入图片[

$("#yf1")[0].src="http://nimage.39.net/ask2016/wx_ask/images/yf_06.png";

文字超过宽度后面的文字显示为点点

text-overflow : ellipsis;
white-space : nowrap;
overflow : hidden

文字设置超过两行文字打点点

        1. height: 50px;
        2. text-overflow: -o-ellipsis-lastline;
        3. overflow: hidden;
        4. text-overflow: ellipsis;
        5. display: -webkit-box;
        6. -webkit-line-clamp: 2;
        7. -webkit-box-orient: vertical;

点击a标签跳转可以滑动效果
$(function(){

    sectionLength = $(".content section").size();
    //锚点跳转滑动效果
    $('a[href*=#],area[href*=#]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                            scrollTop: targetOffset
                        },
                        1000);
                return false;
            }
        }
    });

})
滚动条滚动到顶部除去定位，滑动过程定位fixed
// 定位
$(function(){
    //获取要定位元素距离浏览器顶部的距离
    var navH = $(".nav").offset().top;

    //滚动条事件
    $(window).scroll(function(){
    //获取滚动条的滑动距离
        var scroH = $(this).scrollTop();
        //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
        if(scroH>=navH){
            $(".nav").css({"position":"fixed","top":0});
        }else if(scroH<navH){
         $(".nav").css({"position":"static"});
        }
    })
})
微信分享标题自定义
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
需要配置id
<script>
    var wxinfo = new api39_wx({
        title: '【示爱宣言】——遇上这种表白，谁不想跟你啪啪啪',
        desc: '',
        link: 'http://ask.39.net/html5/jies_h5/',
        imgUrl: 'http://image.39.net/ask2016/wx_ask/xingqingjun/jies_h5/images/share_t.jpg'
    });
</script>
h5背景音乐播放循环
诚心奉上最近被坑的h5背景音乐，说多了都是泪
兼容安卓、ios，音乐播放当中遇见服务器配置问题会出现音乐无法播放，

html：
        <span id="musicControl">
                <a id="mc_play" class="on" onclick="play_music();">
                    <audio id="musicfx" loop="loop" autoplay="autoplay" >
                        <source src=" http://biz.ifeng.com/fashion/special/derucci20153g/img/music.mp3" type="audio/mpeg">
                    </audio>
                </a>
         </span>
css：
  @-webkit-keyframes reverseRotataZ{
        0%{-webkit-transform: rotateZ(0deg);}
        100%{-webkit-transform: rotateZ(-360deg);}
    }
    @-webkit-keyframes rotataZ{
        0%{-webkit-transform: rotateZ(0deg);}
        100%{-webkit-transform: rotateZ(360deg);}
    }
    #musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
    #musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../images/mcbg.png') no-repeat;background-size:100%;}
    #musicControl a audio{width:100%;height:56px;}
    #musicControl a.stop { background-position:left bottom;}
    #musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
    #music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:}
js：
function play_music(){
        if ($('#mc_play').hasClass('on')){
            $('#mc_play audio').get(0).pause();
            $('#mc_play').attr('class','stop');
        }else{
            $('#mc_play audio').get(0).play();
            $('#mc_play').attr('class','on');
        }
        $('#music_play_filter').hide();
        event.stopPropagation(); //阻止冒泡
    }
    function just_play(id){
        $('#mc_play audio').get(0).play();
        $('#mc_play').attr('class','on');
        if (typeof(id)!='undefined'){
            $('#music_play_filter').hide();
        }
        event.stopPropagation(); //阻止冒泡
    }
    function is_weixn(){
        return false;
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    var play_filter=document.getElementById('music_play_filter');
    play_filter.addEventListener('click', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchstart', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchend', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchmove', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousedown', function(){
        just_play(1);
    });
    play_filter.addEventListener('mouseup', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousemove',function(){
        just_play(1);
    });
    window.onload=function(){
        if (!is_weixn()){
            just_play();
        }
    }


禁用Jquery（动画）效果
$(document).ready(function() {
    jQuery.fx.off = true;
});

与其他Javascript类库冲突解决方案
$(document).ready(function() {
   var $jq = jQuery.noConflict();
   $jq('#id').show();
});