一. 获取元素信息
相对浏览器视窗的位置,
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,"");
© 著作权归作者所有