首页 > JS > 正文

js积累

标签:vue, js, 资料


以下是常用的代码收集,没有任何技术含量,只是填坑的积累。转载请注明出处,谢谢。

1. PC - js

// event.preventDefault()会阻挡预设要发生的事件.
// event.stopPropagation()会阻挡发生冒泡事件.
// 而return false则是前面两者的事情他都会做:
// 他会做event.preventDefault();
// 他会做event.stopPropagation();
// 停止callback function的执行并且立即return回来
  • 防止被Iframe嵌套
    if(top != self){
      location.href = about:blank;
    }
    
  • 两种图片lazy加载的方式 第一个By JS中级交流群 成都-猎巫 第二个By 上海-zenki ``` javascript // @description 准备为图片预加载使用的插件 // 使用的图片容器css类名为lazy-load-wrap // 图片真实地址为data-lazy-src // 当lazy-load-wrap容器进入视口,则开始替换容器内所有需要延迟加载的图片路径,并更改容器的加载状态 //第一种方法 $.fn.compassLazyLoad=function(){ var _HEIGHT=window.innerHeight, _lazyLoadWrap=$(‘.lazy-load-wrap’);

    var methods={ setOffsetTop:function(){ $.each(_lazyLoadWrap,function(i,n){ $(n).attr({ ‘top’:n.offsetTop-_HEIGHT, ‘status’:’wait’ }); }) }, isShow:function(){ var _scrollTop=$(window).scrollTop; //利用image容器判断是否进入视口,而非image本身 $.each(_lazyLoadWrap,function(){ var _that=$(this); if (_that.attr(‘status’)===’done’) { return; }; if (_that.attr(‘top’)<=_scrollTop) { _that.find(‘img[data-lazy-src]’).each(function(i,n){ n.src=$(n).data(‘lazy-src’); }); _that.attr(‘status’,’done’); }; }) }, scroll:function(){ $(window).on(‘scroll’,function(){ methods.isShow(); }); }, init:function(){ methods.setOffsetTop(); methods.isShow(); methods.scroll(); } }; methods.init();

}

//第二种方法

var exist=(function($){ var timer=null, temp=[].slice.call($(‘.container’)); ret={};

for(var i=0,len=temp.length-1;i<=len;i++){
	ret[i]=temp[i];
}
var isExist=function(winTop,winEnd){
	for(var i in ret){
		console.log(ret);
		var item=ret[i],
		eleTop=item.offsetTop,
		eleEnd=eleTop+item.offsetHeight;

		if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){
			$(item).css('background','none');
			new Tab($(item).attr('id'),data).init;
			delete ret[i];
		}
	}
}
return {
	timer:timer;
	isExist:isExist;
}; })($);

//第三种方法 Zepto(function ($) { var swiper = new Swiper(‘.swiper-container’, { pagination: ‘.swiper-pagination’, paginationClickable: true, autoplay: 3000, loop: true, autoplayDisableOnInteraction: false }); (function lazyLoad() { var imgs = $(“.lazyLoad”); var src = ‘’; $.each(imgs, function (index, item) { src = $(item).attr(‘data-src’); $(item).attr(‘src’, src); }); })(); }); $(function () { var lazyLoadTimerId = null; /// 智能加载事件 $(window).bind(“scroll”, function () { clearTimeout(lazyLoadTimerId); lazyLoadTimerId = setTimeout(function () { // 延迟加载所有图片 var isHttp = (location.protocol === “http:”); $(“#ym_images img”).each(function () { var self = $(this); if (self.filter(“:above-the-fold”).length > 0) { var originUrl = self.attr(“data-original”); self.attr(“src”, originUrl); } }); }, 500); }); });


- 某年某月的1号为星期几
```javascript
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
weekday[new Date(2015, 9, 1).getDay()];	//2015年10月1号

2. Mobile - js

  • js 判断IOS, 安卓
    var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    alert('是否是Android:'+isAndroid);
    alert('是否是iOS:'+isiOS);
    

3. 微信 weixin

  • UserAgent 判断微信客户端
    // Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12F70 MicroMessenger/6.1.5 NetType/WIFI
    function isWechat() {  
      var ua = navigator.userAgent.toLowerCase();
      return /micromessenger/i.test(ua) || /windows phone/i.test(ua);
    }
    
  • JS接口安全域名不填写,分享onMenuShareAppMessage直接会取默认值。
    // 分享onMenuShareAppMessage直接会取默认值
    
  • 关闭当前页面
    WeixinJSBridge.call('closeWindow');
    
  • 支付接口方法调用必须在addevent里边调用
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){
      that.initOrder();
    }, false);
    
  • 支付接口方法调用必须在
    WeixinJSBridge.invoke('getBrandWCPayRequest', d, function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok"){
          // alert("支付成功");
          // union.release(d.orderId);
          resetUrl();
          paySuccess('home', d.orderId);
      } else {
          cancelOrder(d.orderId);
          // alert(res.err_msg);
      }
      loading.hide();
    });
    
  • 瀑布流无限加载实例
    // be dependent on jquery & jquery.infinitescroll.min.js
    // insert this '<div id="more"><a href="api?page="></a></div>' to your page.html
    (function($){
    $(function(){
        var $container = $('.list-wrap-gd');
        function layOutCallBack() {
            $container.imagesLoaded(function(){
                $container.masonry({
                    itemSelector: '.item-bar',
                    gutter: 10
                });
            });
            $container.imagesLoaded().progress( function() {
                $container.masonry('layout');
            });
        }
    
        layOutCallBack();
    
        $container.infinitescroll({
            navSelector : "#more",
            nextSelector : "#more a",
            itemSelector : ".item-bar",
            pixelsFromNavToBottom: 300,
            loading:{
                img: "/images/masonry_loading.gif",
                msgText: ' ',
                finishedMsg: "<em>已经到最后一页</em>",
                finished: function(){
                    $("#more").remove();
                    $("#infscr-loading").hide();
                }
            },
            errorCallback:function(){
                $(window).unbind('.infscr');
            },
            pathParse: function (path, nextPage) {
                var query = "";
                var keyword=$("#search_keyword").val();
                var cat_id=$("#cat_id").val();
                var brand_id=$("#brand_id").val();
                var country_id = $("#country_id").val();
                query = query + "&namekeyword="+keyword;
                query = query +"&cat_id="+cat_id
                query = query + "&brand_id=" + brand_id; 
                query = query + "&country_id=" + country_id;
                path = [path,query];
                return path;
            }
        },
    
        function(newElements) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
                layOutCallBack();
            });
        });
    });
    })(jQuery);
    
  • iOS,Safari浏览器,input等表单focus后fixed元素错位问题 ```javascript if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) { $(document).on(‘focus’, ‘input, textarea’, function() { $(‘header’).css(“position”, ‘absolute’); $(‘footer’).css(“position”, ‘absolute’);

    });

    $(document).on(‘blur’, ‘input, textarea’, function() { $(‘header’).css(“position”, ‘fixed’); $(‘footer’).css(“position”, ‘fixed’);

    }); }

  
- 得到地理位置
```javascript
function getLocation(callback){
  if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition(
              function(p){
                  callback(p.coords.latitude, p.coords.longitude);
              },
              function(e){
                  var msg = e.code + "\n" + e.message;
              }
      );
  }
}
  • rem计算适配
    (function(doc, win){
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function(){
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    
  • 另外一种rem方案 ```javascript var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement(‘style’); var metaEl = document.querySelector(‘meta[name=”viewport”]’);

dpr = window.devicePixelRatio || 1; rem = docEl.clientWidth * 2 / 10; scale = 1 / dpr;

// 设置viewport,进行缩放,达到高清效果 metaEl.setAttribute(‘content’, ‘width=’ + dpr * docEl.clientWidth + ‘,initial-scale=’ + scale + ‘,maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘,user-scalable=no’);

// 设置data-dpr属性,留作的css hack之用 docEl.setAttribute(‘data-dpr’, dpr);

// 动态写入样式 docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = ‘html{font-size:’ + rem + ‘px!important;}’;

// 给js调用的,某一dpr下rem和px之间的转换函数 window.rem2px = function(v) { v = parseFloat(v); return v * rem; }; window.px2rem = function(v) { v = parseFloat(v); return v / rem; };

window.dpr = dpr; window.rem = rem;


- 获取js所在路径
```js
function getJsDir (src) {
    var script = null;

    if (src) {
        script = [].filter.call(document.scripts, function (v) {
            return v.src.indexOf(src) !== -1;
        })[0];
    } else {
        script = document.scripts[document.scripts.length - 1];
    }

    return script ? script.src.substr(0, script.src.lastIndexOf('/')) : script;
}
  • 从全局捕获错误
    window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) {
      setTimeout(function () {
          var rst = {
              "错误信息:": errMsg,
              "出错文件:": scriptURI,
              "出错行号:": lineNumber,
              "出错列号:": columnNumber,
              "错误详情:": errorObj
          };
    
          alert(JSON.stringify(rst, null, 10));
      });
    };
    
  • 如何通过 js 修改微信浏览器的title?
    var $body = $('body');
    document.title = 'title'; // hack在微信等webview中无法修改document.title的情况    
    var $iframe = $('<iframe src="/favicon.ico"></iframe>').on('load', function(){ 
      setTimeout(function(){ 
          $iframe.off('load').remove() 
      }, 0) 
    }).appendTo($body)
    

1. 常用方法 - js

  • 字符串长度截取
    function cutstr(str, len) {
      var temp,
          icount = 0,
          patrn = /[^\x00-\xff]/
          strre = "";
      for (var i = 0; i < str.length; i++) {
          if (icount < len - 1) {
              temp = str.substr(i, 1);
                  if (patrn.exec(temp) == null) {
                     icount = icount + 1
              } else {
                  icount = icount + 2
              }
              strre += temp
              } else {
              break;
          }
      }
      return strre + "..."
    }
    
  • 替换全部
    String.prototype.replaceAll = function(s1, s2) {
      return this.replace(new RegExp(s1, "gm"), s2)
    }
    
  • 清除空格
    String.prototype.trim = function() {
      var reExtraSpace = /^\s*(.*?)\s+$/;
      return this.replace(reExtraSpace, "$1")
    }
    
  • 清除左空格/右空格
    function ltrim(s){ return s.replace( /^(\s*| *)/, ""); } 
    function rtrim(s){ return s.replace( /(\s*| *)$/, ""); }
    
  • 判断是否以某个字符串开头
    String.prototype.startWith = function (s) {
      return this.indexOf(s) == 0
    }
    
  • 判断是否以某个字符串结束
    String.prototype.endWith = function (s) {
      var d = this.length - s.length;
      return (d >= 0 && this.lastIndexOf(s) == d)
    }
    
  • 转义html标签
    function HtmlEncode(text) {
      return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>')
    }
    
  • 时间日期格式转换
    Date.prototype.Format = function(formatStr) {
      var str = formatStr;
      var Week = ['日', '一', '二', '三', '四', '五', '六'];
      str = str.replace(/yyyy|YYYY/, this.getFullYear());
      str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100));
      str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
      str = str.replace(/M/g, (this.getMonth() + 1));
      str = str.replace(/w|W/g, Week[this.getDay()]);
      str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
      str = str.replace(/d|D/g, this.getDate());
      str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
      str = str.replace(/h|H/g, this.getHours());
      str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
      str = str.replace(/m/g, this.getMinutes());
      str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
      str = str.replace(/s|S/g, this.getSeconds());
      return str
    }
    
  • 判断是否为数字类型
    function isDigit(value) {
      var patrn = /^[0-9]*$/;
      if (patrn.exec(value) == null || value == "") {
          return false
      } else {
          return true
      }
    }
    
  • 设置cookie值
    function setCookie(name, value, Hours) {
      var d = new Date();
      var offset = 8;
      var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
      var nd = utc + (3600000 * offset);
      var exp = new Date(nd);
      exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
      document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"
    }
    
  • 获取cookie值
    function getCookie(name) {
      var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
      if (arr != null) return unescape(arr[2]);
      return null
    }
    
  • 加载样式文件表
    function LoadStyle(url) {
      try {
          document.createStyleSheet(url)
      } catch(e) {
          var cssLink = document.createElement('link');
          cssLink.rel = 'stylesheet';
          cssLink.type = 'text/css';
          cssLink.href = url;
          var head = document.getElementsByTagName('head')[0];
          head.appendChild(cssLink)
      }
    }
    
  • 返回脚本内容
    function evalscript(s) {
      if(s.indexOf('<script') == -1) return s;
      var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig;
      var arr = [];
      while(arr = p.exec(s)) {
          var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i;
          var arr1 = [];
          arr1 = p1.exec(arr[0]);
          if(arr1) {
              appendscript(arr1[1], '', arr1[2], arr1[3]);
          } else {
              p1 = /<script(.*?)>([^\x00]+?)<\/script>/i;
              arr1 = p1.exec(arr[0]);
              appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1);
          }
      }
      return s;
    }
    
  • 清除脚本内容
    function stripscript(s) {
      return s.replace(/<script.*?>.*?<\/script>/ig, '');
    }
    
  • 动态加载脚本文件
    function appendscript(src, text, reload, charset) {
      var id = hash(src + text);
      if(!reload && in_array(id, evalscripts)) return;
      if(reload && $(id)) {
          $(id).parentNode.removeChild($(id));
      }
     
      evalscripts.push(id);
      var scriptNode = document.createElement("script");
      scriptNode.type = "text/javascript";
      scriptNode.id = id;
      scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset);
      try {
          if(src) {
              scriptNode.src = src;
              scriptNode.onloadDone = false;
              scriptNode.onload = function () {
                  scriptNode.onloadDone = true;
                  JSLOADED[src] = 1;
               };
               scriptNode.onreadystatechange = function () {
                   if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) {
                      scriptNode.onloadDone = true;
                      JSLOADED[src] = 1;
                  }
               };
          } else if(text){
              scriptNode.text = text;
          }
          document.getElementsByTagName('head')[0].appendChild(scriptNode);
      } catch(e) {}
    }
    
  • 返回按ID检索的元素对象
    function $(id) {
      return !id ? null : document.getElementById(id);
    }
    
  • 检验URL链接是否有效
    function getUrlState(URL){ 
      var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); 
      xmlhttp.Open("GET",URL, false);  
      try{  
              xmlhttp.Send(); 
      }catch(e){
      }finally{ 
          var result = xmlhttp.responseText; 
          if(result){
              if(xmlhttp.Status==200){ 
                  return(true); 
               }else{ 
                     return(false); 
               } 
           }else{ 
               return(false); 
           } 
      }
    }
    
  • 获取当前路径
    var currentPageUrl = "";
    if (typeof this.href === "undefined") {
      currentPageUrl = document.location.toString().toLowerCase();
    }else {
      currentPageUrl = this.href.toString().toLowerCase();
    }
    
  • 获取页面高度
    function getPageHeight(){
      var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"
                      ? a
                      : g.documentElement;
      return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);
    }
    
  • 获取页面可视宽度
    function getPageViewWidth(){
      var d = document, a = d.compatMode == "BackCompat" ? 
         				   d.body: d.documentElement;
      return a.clientWidth;
    }
    
  • 获取页面宽度
    function getPageWidth(){
      var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"?
      					  a: g.documentElement;
      return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);
    }
    
  • 随机数时间戳
    function uniqueId(){
      var a=Math.random,b=parseInt;
      return Number(new Date()).toString()+b(10*a())+b(10*a())+b(10*a());
    }
    
  • 日期格式化函数
    Date.prototype.format = function(format){
      var o = {
          "M+" : this.getMonth()+1, //month
          "d+" : this.getDate(),    //day
          "h+" : this.getHours(),   //hour
          "m+" : this.getMinutes(), //minute
          "s+" : this.getSeconds(), //second
          "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
          "S" : this.getMilliseconds() //millisecond
      };
      if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
    (this.getFullYear()+"").substr(4 - RegExp.$1.length));
      for(var k in o){
          if(new RegExp("("+ k +")").test(format))
              format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] :("00"+ o[k]).substr((""+ o[k]).length));
      }
      return format;
    }
    //调用
    //new Date().format("yyyy-MM-dd hh:mm:ss");
    
  • 返回顶部的通用方法
    function backTop(btnId) {
      var btn = document.getElementById(btnId);
      var d = document.documentElement;
      var b = document.body;
      window.onscroll = set;
      btn.style.display = "none";
      btn.onclick = function() {
          btn.style.display = "none";
          window.onscroll = null;
          this.timer = setInterval(function() {
              d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
              b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
              if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
              }, 10);
      };
      function set() {
          btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
      }
    };
    backTop('goTop');
    
  • 获得URL中GET参数值
    // 用法:如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得:GET["t1"], GET["t2"], GET["t3"]
    function get_get(){ 
      querystr = window.location.href.split("?")
      if(querystr[1]){
          GETs = querystr[1].split("&");
          GET = [];
          for(i=0;i<GETs.length;i++){
                tmp_arr = GETs.split("=")
                key=tmp_arr[0]
                GET[key] = tmp_arr[1]
          }
      }
      return querystr[1];
    }
    
  • 数组去重
    String.prototype.unique=function(){
      var x=this.split(/[\r\n]+/);
      var y='';
      for(var i=0;i<x.length;i++){
          if(!new RegExp("^"+x.replace(/([^\w])/ig,"\\$1")+"$","igm").test(y)){
              y+=x+"\r\n"
          }
      }
      return y
    };
    
  • 按字典顺序,对每行进行数组排序
    function SetSort(){
      var text=K1.value.split(/[\r\n]/).sort().join("\r\n");//顺序
      var test=K1.value.split(/[\r\n]/).sort().reverse().join("\r\n");//反序
      K1.value=K1.value!=text?text:test;
    }
    
  • 字符串反序输出
    function IsReverse(text){
      return text.split('').reverse().join('');
    }
    
  • 金额大写转换函数
    //格式转换
    function transform(tranvalue) {
      try {
          var i = 1;
          var dw2 = new Array("", "万", "亿"); //大单位
          var dw1 = new Array("拾", "佰", "仟"); //小单位
          var dw = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //整数部分用
          //以下是小写转换成大写显示在合计大写的文本框中     
          //分离整数与小数
          var source = splits(tranvalue);
          var num = source[0];
          var dig = source[1];
          //转换整数部分
          var k1 = 0; //计小单位
          var k2 = 0; //计大单位
          var sum = 0;
          var str = "";
          var len = source[0].length; //整数的长度
          for (i = 1; i <= len; i++) {
                var n = source[0].charAt(len - i); //取得某个位数上的数字
                var bn = 0;
                if (len - i - 1 >= 0) {
                  bn = source[0].charAt(len - i - 1); //取得某个位数前一位上的数字
                }
                sum = sum + Number(n);
                if (sum != 0) {
                  str = dw[Number(n)].concat(str); //取得该数字对应的大写数字,并插入到str字符串的前面
                  if (n == '0') sum = 0;
                }
                if (len - i - 1 >= 0) { //在数字范围内
                  if (k1 != 3) { //加小单位
                        if (bn != 0) {
                          str = dw1[k1].concat(str);
                        }
                        k1++;
                  } else { //不加小单位,加大单位
                        k1 = 0;
                        var temp = str.charAt(0);
                        if (temp == "万" || temp == "亿") //若大单位前没有数字则舍去大单位
                        str = str.substr(1, str.length - 1);
                        str = dw2[k2].concat(str);
                        sum = 0;
                  }
                }
                if (k1 == 3){ //小单位到千则大单位进一
                  k2++;
                }
          }
          //转换小数部分
          var strdig = "";
          if (dig != "") {
                var n = dig.charAt(0);
                if (n != 0) {
                  strdig += dw[Number(n)] + "角"; //加数字
                }
                var n = dig.charAt(1);
                if (n != 0) {
                  strdig += dw[Number(n)] + "分"; //加数字
                }
          }
          str += "元" + strdig;
      } catch(e) {
          return "0元";
      }
      return str;
    }
    //拆分整数与小数
    function splits(tranvalue) {
      var value = new Array('', '');
      temp = tranvalue.split(".");
      for (var i = 0; i < temp.length; i++) {
          value = temp;
      }
      return value;
    }
    

原创文章,转载请注明出处!
本文链接:https://szyuema.github.io//posts/jsjl.html
上篇: markdown 快速入门
下篇: 常用正则