前端交互封装的一些javaScript方法

1.
判断是否是手机

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {

window.isMobile= true;

alert("true");

} else {

window.isMobile= false;

}



2. 判断设备类型

varisWebkit = /Webkit/i.test(navigator.userAgent),

isChrome = /Chrome/i.test(navigator.userAgent),

isMobile = !!("ontouchstart" in window),

isAndroid = /Android/i.test(navigator.userAgent),

isIE = document.documentMode;

3.
判断浏览器类型

if((navigator.userAgent.indexOf('MSIE') >= 0) &&(navigator.userAgent.indexOf('Opera') < 0)){alert('你是使用IE')}else

if (navigator.userAgent.indexOf('Firefox') >= 0){alert('你是使用Firefox')}else

if (navigator.userAgent.indexOf('Opera') >= 0){alert('你是使用Opera')}else

{alert('你是使用其他的浏览器浏览网页！')}

4. 移动端与PC端的addEventListener事件

//移动端

canvas.addEventListener("touchstart",onTouchStart,false);

canvas.addEventListener("touchmove",onTouchMove,false);

canvas.addEventListener("touchend",onTouchEnd,false);

//PC端

canvas.addEventListener("mousedown",onTouchStart,false);

canvas.addEventListener("mousemove",onTouchMove,false);

canvas.addEventListener("mouseup",onTouchEnd,false);

5. 音乐播放按钮，判断有没有当前class，并显示相应的图片

$(".btn-musica").bind("touchend",function(event){

event.preventDefault();

varclassname = $(this).attr("class");

if(classname== "on"){

document.getElementById("audio-music").pause();

$(this).removeClass("on").addClass("off");

}elseif(classname == "off"){

document.getElementById("audio-music").play();

$(this).removeClass("off").addClass("on");

};

});

<divclass="btn-music">

<ahref="#" class="on"></a>

</div>

<audiopreload="auto" autoplay="autoplay" loop="true"id="audio-music">

<sourcesrc="source/music.mp3"></source>

</audio>

6. 为body添加阻止默认事件

$("body").bind("touchmove",function(event){

event.preventDefault();

});

//也可以直接在body上添加阻止默认事件

<bodyontouchmove="event.preventDefault()">

7. mousedown时获取滑到当前位置的x,y坐标

var x =(e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,

y =(e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;

8.判断浏览器的滚动事件

//前提是body,html{height:100%},body,html中不能给高度定义100%样式

window.onscroll=function(){

varwinScroll = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;

if(winScroll> 2000){

console.log(winScroll);

}

};

9. 支付宝账号正则表达式：

if(/^0?(13[0-9]|15[012356789]|18[0123456789]|14[0123456789]|17[0123456789])[0-9]{8}$/.test(exampleInputOrder.value)){

} elseif(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(exampleInputOrder.value)){

} else {

alert("请输入您的支付宝账号！")

return;

}

10. 屏幕旋转的事件和样式

window.onorientationchang= function(){

switch(window.orientation){

case -90:

case 90:

alert("横屏：" + window.orientation);

case 0:

case 180:

alert("竖屏：" + window.orientation);

break;

}

}

//竖屏时使用的样式：

@mediaall and (orientation:porttrait){}

@mediaall and (orientation:landscape){}

11. JS获取经纬度

functionjwdPos(){

navigator.geolocation.getCurrentPosition(

function (pos){ // 如果成果则执行该

var jingdu=pos.coords.latitude;

var weidu=pos.coords.longitude;

alert(weidu);

}

);

return;

}

12. jquery 单击时展示另一个图片

functionchangeImg(){

arri=document.getElementById("arrow-i");

arr=document.getElementById("arrow");

//src.match,将点击后要显示的内容放在match后边

if(arri.src.match("show")){

//初始下显示

arri.src="images/close.png";

arr.style.height="55px";

}else{

//点击后显示

arri.src="images/show.png";

arr.style.height="100%";

}

}

/*<divclass="content">

<p id="arrow">demo。。。。</p>

<img id="arrow-i" src="images/close.png"onclick="changeImg();">

</div>*/

13.回到顶部的js方法

$(document).ready(function(){

$("button").click(function(){

//这样加使整个页面都回到顶部了

$(document.body).animate({scrollTop:0},500);

//这样加使单个div滚动到顶部

$('.pp_content').animate({scrollTop:0},500);

});

});

//使页面回到最顶部

functiongoTop() {

$('html,body').animate({scrollTop:0}, 'slow');

}

//判断页面滚动高度,元素距离顶部的滚动距离

$(window).scrollTop();

//使页面回到某个div的高度处

functiongoDiv(div) {

var a =$("#"+div).offset().top;

$("html,body").animate({scrollTop:a},'slow');

}

//回到页面最底部

functiongoBottom() {

window.scrollTo(0,document.documentElement.scrollHeight-document.documentElement.clientHeight);

}

14.判断IE版本

/*<spanid="Css"></span>*/

if(navigator.userAgent.indexOf("MSIE")>0){

//是否是IE浏览器

if(navigator.userAgent.indexOf("MSIE6.0")>0) {

//6.0 使用1.CSS

}

if(navigator.userAgent.indexOf("MSIE7.0")>0) {

$("body,html").css({"width":"1348px","height":"500px","overflow-x":"hidden"})

$(".wrap,#back-img").css({"width":"1348px","height":"auto","overflow-x":"hidden"});

$("select,input,textarea").css({"width":"254px","height":"40px","top":"17px","left":"146px"});

$("#type").css({"width":"254px","left":"480px"});

$("#idea").css({"width":"565px","height":"80px","top":"80px"});

$("#ideafc").css({"width":"400px","height":"80px","top":"70px"});

$("#usermobile").css({"height":"40px","top":"224px","left":"146px"});

$("#code").css({"height":"40px","top":"224px","left":"485px"});

$(".form").css({"width":"800px","height":"545px","top":"576px","left":"380px"});

$(".active,.namelist").css({"width":"269px","height":"69px","top":"419px","left":"310px"});

$(".namelist").css({"left":"781px"});

$("#tijiao").css({"top":"300px","left":"334px"});

//Css.innerHTML='<linkhref="ie7.css" rel="stylesheet" type="text/css">'

}

}else{

//否则使用3.CSS 还有具体的浏览器 你可以用navigator.userAgent 去获取信息 具体使用 看你自己

}

15.单击某个div，显示另一个div的内容

varclickItem = document.querySelectorAll(".select-item");

varseItem = document.querySelectorAll(".double-column-item");

$("ul.select-listli").click(function(){

var index= $(this).index();

$(this).addClass("current-item");

$(this).siblings().removeClass("current-item");

$(".double-column-item").eq(index).addClass("active-double-column-item");

$(".double-column-item").eq(index).siblings().removeClass("active-double-column-item");

});