javascript进阶(一)

原

一.  获取元素信息

    相对浏览器视窗的位置，

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

    getBoundingClientRect获取元素位置 

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

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

三.在iphone上底部input获取焦点后苹果手机第三方输入法遮住input(input要absolute,详参考css第九)

方法一:
$("input").on("focus",function() {
    var target=this;
    setTimeout(function () {
        target.scrollIntoView(true);
    },500)
});
   方法二:input底部弹出式,先focus,再弹出来

四.移动端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 / 75*2+ '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");
}

八.当input获取焦点弹出输入框，手指再触摸屏幕的时候input失去焦点( 仿微信评论）

//input获取焦点时给body增加手势监听
document.getElementById("input").addEventListener("focus", function () {
    document.getElementById("zhe").style.display="block";  //遮罩层显示
    document.body.addEventListener('touchstart',cc,false);  //input获取焦点后手指再一次触发屏幕
});
function cc() {
    document.getElementById("zhe").style.display="none"; //遮罩层消失
    document.getElementById("input").blur();  
    document.body.removeEventListener('touchstart',cc,false); //取消手势监听
}

九.禁止页面滚动

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

十.ios移动端的css中:active没有效果(只需要给按钮元素或body/html上绑定一个touchstart事件)

document.body.addEventListener('touchstart', function () {
    //空函数
});
    或者
var all=document.querySelectorAll("元素");
for(var i=0;i<all.length;i++){
    all[i].addEventListener('touchstart',function(){
        //空函数
    });
}

十一.下载文件

window.location.href="url";

十二.监听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)
    };
}

十五.去掉字符串中的标签

list="<span>dsadasdasdas</span>"
list = list.replace(/<.*?>/ig,"");