目录
1.截取指定字节数的字符串
2.判断是否微信
3.获取时间格式的几个举例
4.获取字符串字节长度
5.对象克隆、深拷贝
6.组织结构代码证验证
7.身份证号验证
8.js正则为url添加http标识
9.URL有效性校验方法
10.自定义jsonp方法
11.cookie操作
12.生成随机字符串 (可指定长度)
13.浏览器判断
14.Rem移动端适配
15.获取url后参数
16.动态加载JS
17.生成随机颜色值
首页 web前端 js教程 系统归纳JS常用的方法整理(收藏)

系统归纳JS常用的方法整理(收藏)

Aug 04, 2018 am 10:25 AM

本篇目录:

  • 1.截取指定字节数的字符串

  • 2.判断是否微信

  • 3.获取时间格式的几个举例

  • 4.获取字符串字节长度

  • 5.对象克隆、深拷贝

  • 6.组织结构代码证验证

  • 7.身份证号验证

  • 8.js正则为url添加http标识

  • 9.URL有效性校验方法

  • 10.自定义jsonp方法

  • 11.cookie操作

  • 12.生成随机字符串 (可指定长度)

  • 13.浏览器判断

  • 14.Rem移动端适配

  • 15.获取url后参数

  • 16.动态加载JS

  • 17.生成随机颜色值

上述方法都是日常工作中使用所得,所以会不定时更新,大家也可以留下你觉得好的方法:)

1.截取指定字节数的字符串

/**
 * 截取指定字节的字符串
 * @param str 要截取的字符穿
 * @param len 要截取的长度,根据字节计算
 * @param suffix 截取前len个后,其余的字符的替换字符,一般用“…”
 * @returns {*}
 */function cutString(str, len, suffix) {  if (!str) return "";  if (len <= 0) return "";  if (!suffix) suffix = "";
  var templen = 0;  for (var i = 0; i < str.length; i++) {    if (str.charCodeAt(i) > 255) {
      templen += 2;
    } else {
      templen++
    }    if (templen == len) {      return str.substring(0, i + 1) + suffix;
    } else if (templen > len) {      return str.substring(0, i) + suffix;
    }
  }  return str;
}
登录后复制

2.判断是否微信

/**
 * 判断微信浏览器
 * @returns {Boolean}
 */function isWeiXin() {
  var ua = window.navigator.userAgent.toLowerCase();  if (ua.match(/MicroMessenger/i) == &#39;micromessenger&#39;) {    return true;
  } else {    return false;
  }
}
登录后复制

3.获取时间格式的几个举例

function getTimeFormat(time) {
  var date = new Date(parseInt(time) * 1000);
  var month, day, hour, min;
  parseInt(date.getMonth()) + 1 < 10 ? month = &#39;0&#39; + (parseInt(date.getMonth()) + 1) : month = parseInt(date.getMonth()) + 1;
  date.getDate() < 10 ? day = &#39;0&#39; + date.getDate() : day = date.getDate();
  date.getHours() < 10 ? hour = &#39;0&#39; + date.getHours() : hour = date.getHours();
  date.getMinutes() < 10 ? min = &#39;0&#39; + date.getMinutes() : min = date.getMinutes();  return [month, day].join(&#39;-&#39;) + &#39;  &#39; + hour + &#39;:&#39; + min
}function getTimeFormatYMD(time) {
  var date = new Date(parseInt(time) * 1000);
  var year, month, day;
  year = date.getFullYear();
  parseInt(date.getMonth()) + 1 < 10 ? month = &#39;0&#39; + (parseInt(date.getMonth()) + 1) : month = parseInt(date.getMonth()) + 1;
  date.getDate() < 10 ? day = &#39;0&#39; + date.getDate() : day = date.getDate();  return [year, month, day].join(&#39;-&#39;)
}function getTimeFormatAll(time) {
  var date = new Date(parseInt(time) * 1000);
  var year, month, day, hour, min, second;
  year = date.getFullYear();
  parseInt(date.getMonth()) + 1 < 10 ? month = &#39;0&#39; + (parseInt(date.getMonth()) + 1) : month = parseInt(date.getMonth()) + 1;
  date.getDate() < 10 ? day = &#39;0&#39; + date.getDate() : day = date.getDate();
  date.getHours() < 10 ? hour = &#39;0&#39; + date.getHours() : hour = date.getHours();
  date.getMinutes() < 10 ? min = &#39;0&#39; + date.getMinutes() : min = date.getMinutes();
  date.getSeconds() < 10 ? second = &#39;0&#39; + date.getSeconds() : second = date.getSeconds();  return [year, month, day].join(&#39;-&#39;) + &#39;  &#39; + hour + &#39;:&#39; + min + &#39;:&#39; + second
}
登录后复制

4.获取字符串字节长度

/**
 * 获取字符串字节长度
 * @param {String}
 * @returns {Boolean}
 */function checkLength(v) {
  var realLength = 0;
  var len = v.length;  for (var i = 0; i < len; i++) {
    var charCode = v.charCodeAt(i);    if (charCode >= 0 && charCode <= 128) realLength += 1;    else realLength += 2;
  }  return realLength;
}
登录后复制

5.对象克隆、深拷贝

/**
 * 对象克隆&深拷贝
 * @param obj
 * @returns {{}}
 */function cloneObj(obj) {
  var newO = {};  if (obj instanceof Array) {
    newO = [];
  }  for (var key in obj) {
    var val = obj[key];
    newO[key] = typeof val === &#39;object&#39; ? arguments.callee(val) : val;
  }  return newO;
};
登录后复制

克隆拷贝增强版

/**
 * 对象克隆&深拷贝
 * @param obj
 * @returns {{}}
 */function clone(obj) {
  // Handle the 3 simple types, and null or undefined  if (null == obj || "object" != typeof obj) return obj;
  // Handle Date  if (obj instanceof Date) {
    var copy = new Date();
    copy.setTime(obj.getTime());    return copy;
  }
  // Handle Array  if (obj instanceof Array) {
    var copy = [];    for (var i = 0,
    len = obj.length; i < len; ++i) {
      copy[i] = clone(obj[i]);
    }    return copy;
  }
  // Handle Object  if (obj instanceof Object) {
    var copy = {};    for (attr in obj) {      if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }    return copy;
  }
  throw new Error("Unable to copy obj! Its type isn&#39;t supported.");
}
登录后复制

测试用例:

var origin = {
  a: "text",
  b: null,
  c: undefined,
  e: {
    f: [1, 2]
  }
}
登录后复制

6.组织结构代码证验证

验证规则:

组织机构代码是每一个机关、社会团体、企事业单位在全国范围内唯一的、始终不变的法定代码标识。最新使用的组织机构代码在1997年颁布实施,由8位数字(或大写拉丁字母)本体代码和1位数字(或大写拉丁字母)校验码组成。本体代码采用系列(即分区段)顺序编码方法。校验码按下列公式计算:8 C9 = 11 - MOD(∑Ci * Wi,11)… (2) i = 1其中:MOD——表示求余函数;i——表示代码字符从左到右位置序号;Ci——表示第i位置上的代码字符的值,采用附录A“代码字符集”所列字符;C9——表示校验码;Wi——表示第i位置上的加权因子,其数值如下表:i 1 2 3 4 5 6 7 8 Wi 3 7 9 10 5 8 4 2当MOD函数值为1(即C9 = 10)时,校验码用字母X表示。

验证方法:

checkOrgCodeValid: function(el) {
  var txtval = el.value;
  var values = txtval.split("-");
  var ws = [3, 7, 9, 10, 5, 8, 4, 2];
  var str = &#39;0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ&#39;;
  var reg = /^([0-9A-Z]){8}$/;  if (!reg.test(values[0])) {    return false
  }
  var sum = 0;  for (var i = 0; i < 8; i++) {
    sum += str.indexOf(values[0].charAt(i)) * ws[i];
  }
  var C9 = 11 - (sum % 11);
  var YC9 = values[1] + &#39;&#39;;  if (C9 == 11) {
    C9 = &#39;0&#39;;
  } else if (C9 == 10) {
    C9 = &#39;X&#39;;
  } else {
    C9 = C9 + &#39;&#39;;
  }  return YC9 == C9;
}
登录后复制

7.身份证号验证

/**
 * 验证身份证号
 * @param el 号码输入input
 * @returns {boolean}
 */function checkCardNo(el) {
  var txtval = el.value;
  var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  return reg.test(txtval)
}
登录后复制

8.js正则为url添加http标识

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  <title></title>
  <script>
        var html = &#39;http:/ / www.google.com &#39;;
        html += &#39;\rwww.google.com &#39;;
        html += &#39;\rcode.google.com &#39;;
        html += &#39;\rhttp: //code.google.com/hosting/search?q=label%3aPython&#39;;
        var regex = /(https?:\/\/)?(\w+\.?)+(\/[a-zA-Z0-9\?%=_\-\+\/]+)?/gi;
        alert(&#39;before replace:&#39;);
        alert(html);
        html = html.replace(regex,            function(match, capture) {                if (capture) {                    return match
                } else {                    return &#39;http://&#39; + match;
                }
            });
        alert(&#39;after replace:&#39;);
        alert(html); 
    </script>
</head>
<body>  
</body>
</html>
登录后复制

9.URL有效性校验方法

/**
 * URL有效性校验
 * @param str_url
 * @returns {boolean}
 */function isURL(str_url) { 
  // 验证url
  var strRegex = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*&#39;().&=+$%-]+: )?[0-9a-z_!~*&#39;().&amp;=+$%-]+@)?" //           
  ftp的user@ + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
  + "|" // 允许IP和DOMAIN(域名)
  + "([0-9a-z_!~*&#39;()-]+\.)*" // 域名- www.
  + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
  + "[a-z]{2,6})" // first level domain- .com or .museum
  + "(:[0-9]{1,4})?" // 端口- :80
  + "((/?)|" // a slash isn&#39;t required if there is no file name
  + "(/[0-9a-z_!~*&#39;().;?:@&=+$,%<span class="hljs-comment">#-]+)+/?)$";
  var re = new RegExp(strRegex);  return re.test(str_url);
}
// 建议的正则
functionisURL(str) {  return !! str.match(/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g);}
登录后复制

10.自定义jsonp方法

/**
 * 自定义封装jsonp方法
 * @param options
 */
jsonp = function(options) {
  options = options || {};  if (!options.url || !options.callback) {
    throw new Error("参数不合法");
  }
  //创建 script 标签并加入到页面中
  var callbackName = (&#39;jsonp_&#39; + Math.random()).replace(".", "");
  var oHead = document.getElementsByTagName(&#39;head&#39;)[0];
  options.data[options.callback] = callbackName;
  var params = formatParams(options.data);
  var oS = document.createElement(&#39;script&#39;);
  oHead.appendChild(oS);
  //创建jsonp回调函数
  window[callbackName] = function(json) {
    oHead.removeChild(oS);
    clearTimeout(oS.timer);
    window[callbackName] = null;
    options.success && options.success(json);
  };
  //发送请求
  oS.src = options.url + &#39;?&#39; + params;
  //超时处理  if (options.time) {
    oS.timer = setTimeout(function() {
      window[callbackName] = null;
      oHead.removeChild(oS);
      options.fail && options.fail({
        message: "超时"
      });
    },
    time);
  }
};
/**
 * 格式化参数
 * @param data
 * @returns {string}
 */
formatParams = function(data) {
  var arr = [];  for (var name in data) {
    arr.push(encodeURIComponent(name) + &#39;=&#39; + encodeURIComponent(data[name]));
  }  return arr.join(&#39;&&#39;);
}
登录后复制

11.cookie操作

//写cookiessetCookie = function(name, value, time) {
  var strsec = getsec(time);
  var exp = new Date();
  exp.setTime(exp.getTime() + strsec * 1);
  document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
//cookie操作辅助函数
getsec = function(str) {
  var str1 = str.substring(1, str.length) * 1;
  var str2 = str.substring(0, 1);  if (str2 == "s") {    return str1 * 1000;
  } else if (str2 == "h") {    return str1 * 60 * 60 * 1000;
  } else if (str2 == "d") {    return str1 * 24 * 60 * 60 * 1000;
  }
}
//读取cookies
getCookie = function(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");  if (arr = document.cookie.match(reg)) return (arr[2]);  else return null;
}

//删除cookies
delCookie = function(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);  if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
登录后复制

12.生成随机字符串 (可指定长度)

/**
 * 生成随机字符串(可指定长度)
 * @param len
 * @returns {string}
 */
randomString = function(len) {
  len = len || 8;
  var $chars = &#39;ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678&#39;;
  /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length;
  var pwd = &#39;&#39;;  for (var i = 0; i < len; i++) {    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }  return pwd;
}
登录后复制

13.浏览器判断

function parseUA() {
  var u = navigator.userAgent;
  var u2 = navigator.userAgent.toLowerCase();  return { //移动终端浏览器版本信息
    trident: u.indexOf(&#39;Trident&#39;) > -1,
    //IE内核
    presto: u.indexOf(&#39;Presto&#39;) > -1,
    //opera内核
    webKit: u.indexOf(&#39;AppleWebKit&#39;) > -1,
    //苹果、谷歌内核
    gecko: u.indexOf(&#39;Gecko&#39;) > -1 && u.indexOf(&#39;KHTML&#39;) == -1,
    //火狐内核
    mobile: !!u.match(/AppleWebKit.*Mobile.*/),
    //是否为移动终端
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
    //ios终端
    android: u.indexOf(&#39;Android&#39;) > -1 || u.indexOf(&#39;Linux&#39;) > -1,
    //android终端或uc浏览器
    iPhone: u.indexOf(&#39;iPhone&#39;) > -1,
    //是否为iPhone或者QQHD浏览器
    iPad: u.indexOf(&#39;iPad&#39;) > -1,
    //是否iPad
    webApp: u.indexOf(&#39;Safari&#39;) == -1,
    //是否web应该程序,没有头部与底部
    iosv: u.substr(u.indexOf(&#39;iPhone OS&#39;) + 9, 3),
    weixin: u2.match(/MicroMessenger/i) == "micromessenger",
    ali: u.indexOf(&#39;AliApp&#39;) > -1,
  };
}
var ua = parseUA();if (!ua.mobile) {
  location.href = &#39;./pc.html&#39;;
}
登录后复制

14.Rem移动端适配

var rem = {
  baseRem: 40,
  // 基准字号,按照iphone6应该为20,此处扩大2倍,便于计算
  baseWidth: 750,
  // 基准尺寸宽,此处是按照ihpone6的尺寸
  rootEle: document.getElementsByTagName("html")[0],
  initHandle: function() {
    this.setRemHandle();
    this.resizeHandle();
  },  setRemHandle: function() {
    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    this.rootEle.style.fontSize = clientWidth * this.baseRem / this.baseWidth + "px";
  },
  resizeHandle: function() {
    var that = this;
    window.addEventListener("resize",    function() {      setTimeout(function() {
        that.setRemHandle();
      },
      300);
    });
  }
};
rem.initHandle();
登录后复制

15.获取url后参数

function GetRequest() {
  var url = location.search; //获取url中"?"符后的字串
  var theRequest = new Object();  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");    for (var i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
    }
  }  return theRequest;
}
登录后复制

16.动态加载JS

function loadScript(url, callback) {
  var script = document.createElement("script");
  script.type = "text/";  if (typeof(callback) != "undefined") {    if (script.readyState) {
      script.onreadystatechange = function() {        if (script.readyState == "loaded" || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {
      script.onload = function() {
        callback();
      };
    }
  }
  script.src = url;
  document.body.appendChild(script);
}
登录后复制

17.生成随机颜色值

function getRandomColor () {
  const rgb = []  for (let i = 0 ; i < 3; ++i){    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? &#39;0&#39; + color : color
    rgb.push(color)
  }  return &#39;#&#39; + rgb.join(&#39;&#39;)
}
登录后复制

相关文章:

js中数组常用的方法

js 常用的工具方法

以上是系统归纳JS常用的方法整理(收藏)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在JavaScript中替换字符串字符 在JavaScript中替换字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

自定义Google搜索API设置教程 自定义Google搜索API设置教程 Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

示例颜色json文件 示例颜色json文件 Mar 03, 2025 am 12:35 AM

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

10个jQuery语法荧光笔 10个jQuery语法荧光笔 Mar 02, 2025 am 12:32 AM

增强您的代码演示:开发人员的10个语法荧光笔 在您的网站或博客上共享代码片段是开发人员的常见实践。 选择合适的语法荧光笔可以显着提高可读性和视觉吸引力。 t

构建您自己的Ajax Web应用程序 构建您自己的Ajax Web应用程序 Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

8令人惊叹的jQuery页面布局插件 8令人惊叹的jQuery页面布局插件 Mar 06, 2025 am 12:48 AM

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

什么是这个&#x27;在JavaScript? 什么是这个&#x27;在JavaScript? Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可

10 JavaScript和JQuery MVC教程 10 JavaScript和JQuery MVC教程 Mar 02, 2025 am 01:16 AM

本文介绍了关于JavaScript和JQuery模型视图控制器(MVC)框架的10多个教程的精选选择,非常适合在新的一年中提高您的网络开发技能。 这些教程涵盖了来自Foundatio的一系列主题

See all articles