frontend-Tips

　　随时更新日常遇见的js小tip。

Tip1:jquery 判断当前元素是否在动画中

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

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。

第二个函数是将屏幕width均分为32份，然后计算出每份的宽度作为rem的根宽度。整个页面的width为32rem，采用rem布局。

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.html

6.js刷新当前页面

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

7.团抢购多个商品倒计时

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

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);
}

 

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; //返回参数值
}

 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数组复制

二、 使用slice()

可使用slice()进行复制，因为slice()返回也是数组。

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

 

三、 使用concat()

注意concat()返回的并不是调用函数的Array，而是一个新的Array，所以可以利用这一点进行复制。

var array1 = new Array("1","2","3"); 
var array2; 
array2 = array1.concat(); 
array1.length = 0; 
alert(array2); //返回1、2、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();
    }

}

 

 

28、更快的字符串相加方式

很多人误以为数组 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,}$/