javascript进阶(一)

原

获取元素信息

    相对浏览器视窗的位置，

    getClientRects获取元素占据页面的所有矩形区域 

    getBoundingClientRect获取元素位置 

随机数在(min-max)范围内(包括最小值)

parseInt(Math.random()*(max-min+1)+min,10);

移动端rem布局

方法一(来自aui):

html{
	font-size: 20px;
}

@media only screen and (min-width: 400px) {
	html {
		font-size: 21.33333333px !important;
	}
}
@media only screen and (min-width: 414px) {
	html {
		font-size: 21px !important;
	}
}
@media only screen and (min-width: 480px) {
	html {
		font-size: 25.6px !important;
	}
}

方法二:

iphone6的750设计图.

图中的元素大小/20=实际大小rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*20+ 'px';

Math.cos和Math.sin的用法

iframe与父页面的通信

JS判断当前页面是电脑打开还是移动端打开的

var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    console.log("phone");
} else {
    console.log("pc");
}

禁止|恢复页面滚动

function handler() {
    event.preventDefault();
    event.stopPropagation();
}
document.body.addEventListener('touchstart',handler,false); //静止页面滚动
document.body.removeEventListener('touchstart',handler,false); //恢复页面滚动

监听div内容发生变化（插入发生变化）

$("div").on('DOMNodeInserted', function(e) {
    console.log("我变化了");
});

js获取上传图片的路径

<input class="upload-file" type="file" id="file" accept="image/*" multiple/> //增加multiple属性可选择拍摄和图库等。如果没有这个属性，只能拍摄

function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file)
    } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
    } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
    }
    return url
};
$("#file").on("change",function(e){
    var url=getObjectURL(this.files[0]);
    $("img").attr("src",url)
});
        //注：
// !!!!!! // 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL 
// 获取 window 的 URL 工具 var URL = window.URL || window.webkitURL; 
// 通过 file 生成目标 url var imgURL = URL.createObjectURL(file); 
// 用这个 URL 产生一个 <img> 将其显示出来 $('body').append($('<img/>').attr('src', imgURL)); 
// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 // URL.revokeObjectURL(imgURL); }

图片路径转Base64

function getBase64(url){
//通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
    var Img = new Image(),
        dataURL='';
    Img.src=url;
    Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
        var canvas = document.createElement("canvas"), //创建canvas元素
            width=Img.width, //确保canvas的尺寸和图片一样
            height=Img.height;
        canvas.width=width;
        canvas.height=height;
        canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
        dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL(Base64)
    };
}