js技巧
1 JSON.parse()
JSON.parse()
a='{"a":"abc"}';
b='[a,b,c,d]';
a,b 都是字符串 用 JSON.parse(a) -> 得到 原來對象;
原來只知道 json 對象可以用現(xiàn)在知道 數(shù)組對象也可以這樣用
那對于 JSON.stringify() 對于數(shù)組同樣有效
2 回到頂部
結(jié)構(gòu)部分
<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過濾器的使用技巧
根據(jù)后臺返回的數(shù)據(jù) 根據(jù) 自定義顯示
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 正則處理字符串 數(shù)組
處理"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: "親,開始時間 應早于 結(jié)束時間 ^_^",
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標簽設(shè)置固定的寬度,
2 也可以讓容器內(nèi)部元素定位的方式實現(xiàn).
<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>
避免讓用戶短時間之內(nèi)重復點擊.
//點擊出發(fā)時間之后 獲取到觸發(fā)點.
var $btn = $(e.target);
//當點擊事件發(fā)生后 立刻讓點擊事件 失效
$btn.prop('disabled',true);
........
........
當函數(shù)只想完畢以后 在從新讓點擊事件恢復.
$btn.prop('disabled',false);
