frontend-Tips

時間  2019-11-18
標籤 frontend tips 简体版
原文   原文鏈接

　　隨時更新平常碰見的js小tip。javascript

Tip1:jquery 判斷當前元素是否在動畫中

　　$(selector).is(":animated");php

Tip2:手機適配的方案

(function(win,doc){
    var docEl = doc.documentElement;
    var appVersion = win.navigator.appVersion;
    var isAndroid = appVersion.match(/android/gi);
    var isIPhone = appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    var dpr = 1,scale = 1;
if (isIPhone) {
        if (devicePixelRatio >= 3) {
            dpr = 3;
        } else if (devicePixelRatio >= 2){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        dpr = 1;
    }
    scale = 1 / dpr;
var metaEl = doc.querySelector('meta[name="viewport"]');
    if(!metaEl){
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }
    if(dpr != 1){
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    }
    window.DPR = dpr;
})(window,document);

 /*rem adaptation*/
(function (doc, win) {
    var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth >= window.DPR * 540 ? window.DPR * 540 : docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 10*(clientWidth / 320) + 'px';
                docEl.style.maxWidth = clientWidth + 'px';
            };
    recalc();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
})(document, window);

上面一個函數是根據不一樣設備的不一樣的dpr顯示不一樣倍數的viewport。css

第二個函數是將屏幕width均分爲32份，而後計算出每份的寬度做爲rem的根寬度。整個頁面的width爲32rem，採用rem佈局。html

3.溢出顯示爲省略號

text-overflow: ellipsis;
    white-space: nowrap;/*禁止自動換行*/
    overflow: hidden;

//多行文本溢出省略
  1. overflow : hidden;
  2. text-overflow: ellipsis;
  3. display: -webkit-box;
  4. -webkit-line-clamp: 2;
  5. -webkit-box-orient: vertical;
 

 4.返回頂部效果

$(window).scroll(function(){

　　if($('html,body').scrollTop>1000){
   $("#top").fadeIn();//滾動條高度超過1000，顯示返回top按鈕 
} 
})
//點擊返回頂部
$('#top).click(function(){
   $('html,body').animate({scrollTop:0},500) 
})

 5.多行文本溢出顯示省略號

　　參考文章：　　http://c7sky.com/text-overflow-ellipsis-on-multiline-text.htmljava

6.js刷新當前頁面

　　window.location.reload();或 window.location = "";jquery

7.團搶購多個商品倒計時

var countDownLength = $('.test').length;android

var countVal = 0;
var tempTime = new Date($('#curTime').val().replace(/-/ig,'/')).getTime();
var sec;
$('.test').each(function(i){
var $this = $(this);
count_down($this.html(),i)
});
function count_down(o,j){
var www_qsyz_net=/^[\d]{4}-[\d]{1,2}-[\d]{1,2}( [\d]{1,2}:[\d]{1,2}(:[\d]{1,2})?)?$/ig,str='',conn,s;
if(!o.match(www_qsyz_net)){
return false;
}
if(countVal%countDownLength == 0&&countVal > 0){
tempTime+=1000;
}
countVal++;
sec=(new Date(o.replace(/-/ig,'/')).getTime() - tempTime)/1000;
console.log(sec);
if(sec > 0){
conn='還有';
}else{
conn='已過去';
sec*=-1;
}
s={'天':sec/24/3600,'小時':sec/3600%24,'分':sec/60%60,'秒':sec%60};
for(i in s){
if(Math.floor(s[i])>0 ) str += Math.floor(s[i]) + i;
}
if(Math.floor(sec)==0){ str='0秒'; }
$('.time').eq(j).html(o + conn + str) ;
setTimeout(function(){count_down(o,j)},1000);
}web

 

8.jquery 獲取url中的數據

 

//獲取url中的參數
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象
var r = window.location.search.substr(1).match(reg); //匹配目標參數
if (r != null) return unescape(r[2]); return null; //返回參數值
}ajax

 9.遮罩層通常用position:fixed製做 js獲取window 高度

10.瀏覽器 返回 

 javascript:location.href=document.referrer   window.history.go(-1) window.history.back()
 

11.css動畫執行完成後回調函數

$("#mydiv").on('webkitAnimationEnd',myStartFunction)

12. $("#id").is(":checked") 判斷複選框是否選中

使用 jquery .attr('checked','checked') 或者 .attr('checked','true') 點擊選中後再取消選中後 不能再選中的方法 正則表達式

$("#yesOrNo").each(function(){
    this.checked=true;
});

 

13.input type tel ajax請求時報錯 說不能識別 selection ，chrome版本問題 解決方法 用對象從新組織數據

var jsonObj1 = {};
jsonObj1.aid = $("#aid").val();
jsonObj1.mobile = $("#inputMobile").val();

$(「input[name='radio_name']:checked」).val()

14. iframe元素獲取

在iframe子頁面獲取父頁面元素
代碼以下:
$.('#objld', parent.document); 
在父頁面獲取iframe子頁面的元素
代碼以下:
$("#objid", document.iframes('iframe').document) 
或
代碼以下:
$(document.getElementById('iframeId').contentWindow.document.body).html() $(document.getElementById('iframeId').contentWindow.document.body).html()

15. radio值獲取

$("input[name='radio_name']:checked").val();  //選擇被選中Radio的Value值

$("input[name='radio_name'][checked]").val();  //選擇被選中Radio的Value值

16. js數組複製

2、 使用slice()

可以使用slice()進行復制，由於slice()返回也是數組。

var array1 = new Array("1","2","3"); 
var array2; 
array2 = array1.slice(0); 
array1.length = 0; 
alert(array2); //返回一、二、3 

 

3、 使用concat()

注意concat()返回的並非調用函數的Array，而是一個新的Array，因此能夠利用這一點進行復制。

var array1 = new Array("1","2","3"); 
var array2; 
array2 = array1.concat(); 
array1.length = 0; 
alert(array2); //返回一、二、3 

17. iphone document.title設置無效hack

var $body = $('body');
document.title = res.data.actiTitle;
// hack在微信等webview中沒法修改document.title的狀況
var $iframe = $('<iframe src="/favicon.ico"></iframe>');
$iframe.on('load',function() {
    setTimeout(function() {
        $iframe.off('load').remove();
    }, 0);
}).appendTo($body);

18.多行文本溢出隱藏
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
19.圖片尺寸
var img = new Image();
img.src = constains.basePath + data.url;
img.onload = function() {
   if( (img.width/img.height)>0.666){ //寬高比 大於2/3
      var imgTop =  (img.height/img.width*80-120)/2;
      $(root).find("img").css({'width':80+'px','height':'auto','top':-imgTop+'px','left':0});
   }else{ //太高
      var imgLeft =  (img.width/img.height*120-80)/2;
      $(root).find("img").css({'height':120+'px','width':'auto','top':0,'left':-imgLeft+'px'});
   }
};
20.子元素非最後一個的after
.fx-traf-detail .swiper-slide:not(:last-child):after

21.touch事件
var isTouch = 'ontouchstart' in window,
    events = {
        start: isTouch ? 'touchstart' : 'mousedown',
        move: isTouch ? 'touchmove' : 'mousemove',
        end: isTouch ? 'touchend' : 'mouseup'
    };
event-bind
_this.canvas.addEventListener(events.start, function (e) {
    _this.start(e);
}, false);

22.swiper 移動端 使用ontap  

　　移動端調用相機

<input type="file" accept="image/*;" capture="camera" >
移動端調用電話
href="tel:13888888"

23.iphone移動端點擊元素出現黑灰色背景

-webkit-tap-highlight-color:rgba(0,0,0,0);

24.body設置背景 在全屏模式下底部有白條

html,body{height:100%;}
 

25.opacity致使內部元素也有透明度
 

　　使用rgba格式設置透明
 

 
 

26.多列等高佈局 table table-cell
 

 
 

27.Img 加載完成判斷以及回調
 

 
 
function getImage(url,callback){
    var img = new Image();
    img.src = url;
    
    // 若是圖片被緩存，則直接返回緩存數據
    if(img.complete){
        callback(img.width, img.height);
    }else{
                // 徹底加載完畢的事件
            img.onload = function(){
            callback(img.width, img.height);
            }
        }
}
 
 
28.動態加載
 
 
 
 
 
 
  
//動態加載函數
function loadJS(url, success) {
    var domScript = document.createElement('script');
    domScript.src = url;
    success = success || function(){};
    domScript.onload = domScript.onreadystatechange = function() {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
            success();
            this.onload = this.onreadystatechange = null;
            this.parentNode.removeChild(this);
        }
    };
    document.getElementsByTagName('head')[0].appendChild(domScript);
}
 
 
 
 
用法：
 
 
 
  
var loadMapResource = false;
function loadMapScript(){
    if(!loadMapResource){
        loadJS('/page/activity/js/baidu-map.js',function (){
            loadJS('/page/activity/js/activityMarker.js',function (){
                addMarkers();
                loadMapResource = true;
            });
        });
    }else{
        addMarkers();
    }

}
 
 
 
 
 
 
 
 
 
 
2八、更快的字符串相加方式
 
 
不少人誤覺得數組 push 方法拼接字符串會比 += 快，要知道這僅僅是 IE6-8 的瀏覽器下。實測代表現代瀏覽器使用 += 會比數組 push 方法快，而在 v8 引擎中，使用 += 方式比數組拼接快 4.7 倍。因此 artTemplate 根據 javascript 引擎特性採用了兩種不一樣的字符串拼接方式。
 
 
29。 table 多欄 自適應佈局
 
 
　　table 設置 table-layout:fixed  對固定寬度列設置 width = 200 ;自適應寬度列設置 width = "50%",數字可變
 
 
 30.js獲取scale rotate等，以及經過cssText設置樣式
 
 
 
 
 
 
  
var el = document.getElementById("divTransform");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
    st.getPropertyValue("-moz-transform") ||
    st.getPropertyValue("-ms-transform") ||
    st.getPropertyValue("-o-transform") ||
    st.getPropertyValue("transform") ||
    "FAIL";

// With rotate(30deg)...
// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
console.log('Matrix: ' + tr);

// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix

var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];

var scale = Math.sqrt(a * a + b * b);

console.log('Scale: ' + scale);

// arc sin, convert from radians to degrees, round
var sin = b / scale;
// next line works for 30deg but not 130deg (returns 50);
// var angle = Math.round(Math.asin(sin) * (180/Math.PI));
var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));

console.log('Rotate: ' + angle + 'deg');
 
 
 
 
 31.修改或者添加url參數
 
 
 
  
/* 
* url 目標url 
* arg 須要替換的參數名稱 
* arg_val 替換後的參數的值 
* return url 參數替換後的url 
*/ 
function changeURLArg(url,arg,arg_val){ 
    var pattern=arg+'=([^&]*)'; 
    var replaceText=arg+'='+arg_val; 
    if(url.match(pattern)){ 
        var tmp='/('+ arg+'=)([^&]*)/gi'; 
        tmp=url.replace(eval(tmp),replaceText); 
        return tmp; 
    }else{ 
        if(url.match('[\?]')){ 
            return url+'&'+replaceText; 
        }else{ 
            return url+'?'+replaceText; 
        } 
    } 
    return url+'\n'+arg+'\n'+arg_val; 
} 
 
 
 
 
changeURLArg('http://www.daimajiayuan.com/test.php?class_id=3&id=2','class_id',4);
 
 
 結果爲http://www.daimajiayuan.com/test.php?class_id=4&id=2
 
 
changeURLArg('http://www.daimajiayuan.com/test.php','class_id',4);
 
 
結果爲http://www.daimajiayuan.com/test.php?class_id=4
 
 
 32.獲取服務器時間
 
 
 
  
function getServeTime(pageData) {
    var xhr = new window.XMLHttpRequest();
    xhr.open("get", "/?time="+Math.random());
    xhr.send(null);
    xhr.onreadystatechange = function() {
        var time = null,
            curDate = null;
        if (xhr.readyState === 2) {
            // 獲取響應頭裏的時間戳 
            time = xhr.getResponseHeader("Date");
            curDate = new Date(time);
            getTimeDistance(pageData, curDate)
        }
    }

}
 
 
 
 
33. 中文正則表達式
 
 
 
  
/^([\u4e00-\u9fa5]|[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5|\u0020]){0,}$/.test('')
 
 
 
 
34. 英文正則表達式
 
 
 
  
/^([A-Za-z]|[\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]){0,}$/
 
 
  



        

            

        	





    


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    


    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程