前端交互封装的一些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”>

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.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}KaTeX parse error: Got function '\.' with no arguments as subscript at position 57: …f(/^([a-zA-Z0-9_̲\.\-])+\@(([a-z…/.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”>
     

    demo。。。。

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

*/

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”>/ 
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”);
     
});

---

作者：jun_h5
来源：CSDN
原文：https://blog.csdn.net/qq_26445509/article/details/51481278
版权声明：本文为博主原创文章，转载请附上博文链接！