js技巧

---

1 JSON.parse()

JSON.parse()
a='{"a":"abc"}';
b='[a,b,c,d]';
a,b 都是字符串 用 JSON.parse(a) -> 得到 原来对象;
原来只知道 json 对象可以用现在知道 数组对象也可以这样用

那对于 JSON.stringify() 对于数组同样有效

2 回到顶部

结构部分

 <div class="goTop hide"></div>

css部分

    .goTop{
    position: fixed;
    top: 75%;
    right: 30px;
    width: 60px;
    height: 60px;
    background-image: url("../img/goTop.png");
    background-size: cover;
    cursor: pointer;
}
   .hide{
   display:none;
   }

就是部分

$(window).scroll(function(){
    if ($(this).scrollTop() > 300){
        $(".goTop").removeClass("hide");
    }else {
        $(".goTop").addClass("hide");
    }
});
$(".goTop").on("click",function(){
    $("html,body").animate({scrollTop:0},1000);//回到顶端 耗时1秒
});

3 avalon过滤器的使用技巧

根据后台返回的数据 根据 自定义显示

 avalon.filters.Sugar_time = function(str){
    switch(str){
        case "before_breakfast":
        return "🍞 早餐前";
        case "after_breakfast":
        return "🧀 早餐后";
        case "before_lunch":
        return "🍚 午餐前";
        case "after_lunch":
        return "🍔 午餐后";
        case "before_dinner":
        return "🍲 晚餐前";
        case "after_dinner":
        return "🍜 晚餐后";
        case "before_sleeping":
        return "😴 睡觉前";
      
    }
}

<span>{{el.time_interval | Sugar_time}}</span>

4 replace 正则处理字符串 数组

处理"2012-01-05"和"2013-01-01"时间早晚的问题.

var reg = new RegExp('-', 'g');
var l_t = $('#begin_date').val().replace(reg, '');
var r_t = $( '#end_date').val().replace(reg, '');

  if (l_t - r_t > 0) {
                layer.open({
                    content: "亲,开始时间 应早于 结束时间 ^_^",
                    type: 1,
                    time: 3,
                    className: 'mylayer',
                    shade: false
                });
                return false;
            }

<script type="text/javascript">
        var acss='red2 blue yellow red2 eee';
        var str='red';
        var str2='red2'
        var reg=new RegExp('\\b'+str2+'\\b','g');
        //alert(reg.test(acss))    
        alert(acss.replace(reg,str))   
        var acss='2012-12-02';
        var str='-';
        var str2='+';
        var reg=new RegExp('\\b'+str+'\\b','g');
        //alert(reg.test(acss))    
        alert(acss.replace(reg,''))   
    </script>

5 登录表单,注册表单 对不齐的解决方案

1 可以span标签设置固定的宽度,
2 也可以让容器内部元素定位的方式实现.

  <p><span>同户名:</span> <input type="text" placeholder="4-15个字"></p>
   <p><span>密码:</span> <input type="text" placeholder="4-15个字"></p>
    <p><span>住址:</span> <input type="text" placeholder="4-15个字"></p>

避免让用户短时间之内重复点击.

//点击出发时间之后  获取到触发点.
var $btn = $(e.target);
//当点击事件发生后 立刻让点击事件 失效
$btn.prop('disabled',true);
........
........
当函数只想完毕以后 在从新让点击事件恢复.
$btn.prop('disabled',false);