前端交互封装的一些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.οnscrοll=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"οnclick="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");
     
});