找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › 技术交流区 › 前端技术交流 › 查看内容
发新帖

断天涯大虾

社区贡献组

269

主题

272

帖子

1655

积分

社区贡献组

积分
1655

微信认证勋章

最新发帖

JavaScript常用代码总结

断天涯大虾
社区贡献组   /  发表于：2017-4-19 09:25  /   查看：10146  /  回复：0
本帖最后由 断天涯大虾 于 2017-4-19 09:38 编辑

分享了一些常用JavaScript代码，有：1.手机类型判断、2.字符串长度、3.获取url中的参数、4.js 绑定事件、5.当前浏览器JS的版本、6.全选/全不选、7.移除事件、8.回车提交、9.ajax提交等。

经常使用的 JS 方法，今天记下，以便以后查询

手机类型判断
  1. var BrowserInfo = {
  2.     userAgent: navigator.userAgent.toLowerCase()
  3.     isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
  4.     isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
  5.     isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
  6.     isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
  7. }
复制代码

返回字符串长度，汉子计数为2
  1. function strLength(str) {
  2.             var a = 0;
  3.             for (var i = 0; i < str.length; i++) {
  4.                 if (str.charCodeAt(i) > 255)
  5.                     a += 2;//按照预期计数增加2
  6.                 else
  7.                     a++;
  8.             }
  9.             return a;
  10.         }
复制代码

获取url中的参数
  1. function GetQueryStringRegExp(name,url) {
  2.     var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
  3.     if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")); return "";
  4. }
复制代码

/* js 绑定事件 适用于任何浏览器的元素绑定 */
  1. function eventBind(obj, eventType, callBack) {
  2.         if (obj.addEventListener) {
  3.             obj.addEventListener(eventType, callBack, false);
  4.         }
  5.         else if (window.attachEvent) {
  6.             obj.attachEvent('on' + eventType, callBack);
  7.         }
  8.         else {
  9.             obj['on' + eventType] = callBack;
  10.         }
  11.     };
  12. eventBind(document, 'click', bodyClick);
复制代码

/* 获得当前浏览器JS的版本 */
  1. function getjsversion(){
  2.     var n = navigator;
  3.     var u = n.userAgent;
  4.     var apn = n.appName;
  5.     var v = n.appVersion;
  6.     var ie = v.indexOf('MSIE ');
  7.     if (ie > 0){
  8.         apv = parseInt(i = v.substring(ie + 5));
  9.         if (apv > 3) {
  10.             apv = parseFloat(i);
  11.         }
  12.     } else {
  13.         apv = parseFloat(v);
  14.     }
  15.     var isie = (apn == 'Microsoft Internet Explorer');
  16.     var ismac = (u.indexOf('Mac') >= 0);
  17.     var javascriptVersion = "1.0";
  18.     if (String && String.prototype) {
  19.         javascriptVersion = '1.1';
  20.         if (javascriptVersion.match) {
  21.             javascriptVersion = '1.2';
  22.             var tm = new Date;
  23.             if (tm.setUTCDate) {
  24.                 javascriptVersion = '1.3';
  25.                 if (isie && ismac && apv >= 5) javascriptVersion = '1.4';
  26.                 var pn = 0;
  27.                 if (pn.toPrecision) {
  28.                     javascriptVersion = '1.5';
  29.                     a = new Array;
  30.                     if (a.forEach) {
  31.                         javascriptVersion = '1.6';
  32.                         i = 0;
  33.                         o = new Object;
  34.                         tcf = new Function('o', 'var e,i=0;try{i=new Iterator(o)}catch(e){}return i');
  35.                         i = tcf(o);
  36.                         if (i && i.next) {
  37.                             javascriptVersion = '1.7';
  38.                         }
  39.                     }
  40.                 }
  41.             }
  42.         }
  43.     }
  44.     return javascriptVersion;
  45. }
复制代码

/* 获取当前点击事件的Object对象 */
  1. function getEvent() {
  2.     if (document.all) {
  3.         return window.event; //如果是ie
  4.     }
  5.     func = getEvent.caller;
  6.     while (func != null) {
  7.         var arg0 = func.arguments[0];
  8.         if (arg0) {
  9.             if ((arg0.constructor == Event || arg0.constructor == MouseEvent)
  10. || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
  11.                 return arg0;
  12.             }
  13.         }
  14.         func = func.caller;
  15.     }
  16.     return null;
  17. };
复制代码

/* 字符串截取方法 */
  1. getCharactersLen: function (charStr, cutCount) {
  2.         if (charStr == null || charStr == '') return '';
  3.         var totalCount = 0;
  4.         var newStr = '';
  5.         for (var i = 0; i < charStr.length; i++) {
  6.             var c = charStr.charCodeAt(i);
  7.             if (c < 255 && c > 0) {
  8.                 totalCount++;
  9.             } else {
  10.                 totalCount += 2;
  11.             }
  12.             if (totalCount >= cutCount) {
  13.                 newStr += charStr.charAt(i);
  14.                 break;
  15.             }
  16.             else {
  17.                 newStr += charStr.charAt(i);
  18.             }
  19.         }
  20.         return newStr;
  21.     }
复制代码

/* JS 弹出新窗口全屏 */
  1. var tmp = window.open("about:blank", "", "fullscreen=1")
  2.                             tmp.moveTo(0, 0);
  3.                             tmp.resizeTo(screen.width + 20, screen.height);
  4.                             tmp.focus();
  5.                             tmp.location.href = 'http://www.che168.com/pinggu/eva_' + msgResult.message[0] + '.html';

  7. var config_ = "left=0,top=0,width=" + (window.screen.Width) + ",height=" + (window.screen.Height);
  8.                             window.open('http://www.che168.com/pinggu/eva_' + msgResult.message[0] + '.html', "winHanle", config_);
  9. //模拟form提交打开新页面
  10. var f = document.createElement("form");
  11.                             f.setAttribute('action', 'http://www.che168.com/pinggu/eva_' + msgResult.message[0] + '.html');
  12.                             f.target = '_blank';
  13.                             document.body.appendChild(f);
  14.                             f.submit();
复制代码

/* 全选/全不选 */
  1. function selectAll(objSelect) {
  2.             if (objSelect.checked == true) {
  3.                 $("input[name='chkId']").attr("checked", true);
  4.                 $("input[name='chkAll']").attr("checked", true);
  5.             }
  6.             else if (objSelect.checked == false) {
  7.                 $("input[name='chkId']").attr("checked", false);
  8.                 $("input[name='chkAll']").attr("checked", false);
  9.             }
  10.         }
复制代码

/* js 判断浏览器 */
  1. 判断是否是 IE 浏览器
  2.     if (document.all){
  3.         alert(”IE浏览器”);
  4.     }else{
  5.         alert(”非IE浏览器”);
  6.     }
  7.     if (!!window.ActiveXObject){
  8.         alert(”IE浏览器”);
  9.     }else{
  10.         alert(”非IE浏览器”);
  11.     }
  12. 判断是IE几
  13. var isIE=!!window.ActiveXObject;
  14. var isIE6=isIE&&!window.XMLHttpRequest;
  15. var isIE8=isIE&&!!document.documentMode;
  16. var isIE7=isIE&&!isIE6&&!isIE8;
  17. if (isIE){
  18.     if (isIE6){
  19.         alert(”ie6″);
  20.     }else if (isIE8){
  21.         alert(”ie8″);
  22.     }else if (isIE7){
  23.         alert(”ie7″);
  24.     }
  25. }
复制代码
/* 判断浏览器 */
  1. function getOs() {
  2.     if (navigator.userAgent.indexOf("MSIE 8.0") > 0) {
  3.         return "MSIE8";
  4.     }
  5.     else if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
  6.         return "MSIE6";
  7.     }
  8.     else if (navigator.userAgent.indexOf("MSIE 7.0") > 0) {
  9.         return "MSIE7";
  10.     }
  11.     else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
  12.         return "Firefox";
  13.     }
  14.     if (navigator.userAgent.indexOf("Chrome") > 0) {
  15.         return "Chrome";
  16.     }
  17.     else {
  18.         return "Other";
  19.     }
  20. }
复制代码

/* JS判断两个日期大小 适合 2012-09-09 与2012-9-9 两种格式的对比 */
  1. //得到日期值并转化成日期格式，replace(/\-/g, "\/")是根据验证表达式把日期转化成长日期格式，这样再进行判断就好判断了
  2.         function ValidateDate() {
  3.             var beginDate = $("#t_datestart").val();
  4.             var endDate = $("#t_dateend").val();
  5.             if (beginDate.length > 0 && endDate.length>0) {
  6.                 var sDate = new Date(beginDate.replace(/\-/g, "\/"));
  7.                 var eDate= new Date(endDate.replace(/\-/g, "\/"));
  8.                 if (sDate > eDate) {
  9.                     alert('开始日期要小于结束日期');
  10.                     return false;
  11.                 }
  12.             }
  13.         }
复制代码

/* 移除事件 */
  1. this.moveBind = function (objId, eventType, callBack) {
  2.                 var obj = document.getElementById(objId);
  3.                 if (obj.removeEventListener) {
  4.                     obj.removeEventListener(eventType, callBack, false);
  5.                 }
  6.                 else if (window.detachEvent) {
  7.                     obj.detachEvent('on' + eventType, callBack);
  8.                 }
  9.                 else {
  10.                     obj['on' + eventType] = null;
  11.                 }
  12.             }
复制代码

/* 回车提交 */
  1. $("id").onkeypress = function (event) {
  2.     event = (event) ? event : ((window.event) ? window.event : "")
  3.     keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);
  4.     if (keyCode == 13) {
  5.         $("SubmitLogin").onclick();
  6.     }
  7. }
复制代码

/* JS 执行计时器 */
  1. timeStart = new Date().getTime();
  2. timesEnd = new Date().getTime();
  3. document.getElementById("time").innerHTML = timesEnd - timeStart;
复制代码

/* JS 写Cookie */
  1. function setCookie(name, value, expires, path, domain) {
  2.     if (!expires) expires = -1;
  3.     if (!path) path = "/";
  4.     var d = "" + name + "=" + value;
  5.     var e;
  6.     if (expires < 0) {
  7.         e = "";
  8.     }
  9.     else if (expires == 0) {
  10.         var f = new Date(1970, 1, 1);
  11.         e = ";expires=" + f.toUTCString();
  12.     }
  13.     else {
  14.         var now = new Date();
  15.         var f = new Date(now.getTime() + expires * 1000);
  16.         e = ";expires=" + f.toUTCString();
  17.     }
  18.     var dm;
  19.     if (!domain) {
  20.         dm = "";
  21.     }
  22.     else {
  23.         dm = ";domain=" + domain;
  24.     }
  25.     document.cookie = name + "=" + value + ";path=" + path + e + dm;
  26. };
复制代码

/* JS 读Cookie */
  1. function readCookie(name) {
  2.     var nameEQ = name + "=";
  3.     var ca = document.cookie.split(';');
  4.     for (var i = 0; i < ca.length; i++) {
  5.         var c = ca[i];
  6.         while (c.charAt(0) == ' ') c = c.substring(1, c.length);
  7.         if (c.indexOf(nameEQ) == 0) {
  8.             return decodeURIComponent(c.substring(nameEQ.length, c.length))
  9.         }
  10.     } return null
  11. }
复制代码

/* Ajax 请求 */
  1. C.ajax = function (args) {
  2.     var self = this;
  3.     this.options = {
  4.         type: 'GET',
  5.         async: true,
  6.         contentType: 'application/x-www-form-urlencoded',
  7.         url: 'about:blank',
  8.         data: null,
  9.         success: {},
  10.         error: {}
  11.     };
  12.     this.getXmlHttp = function () {
  13.         var xmlHttp;
  14.         try {
  15.             xmlhttp = new XMLHttpRequest();
  16.         }
  17.         catch (e) {
  18.             try {
  19.                 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  20.             }
  21.             catch (e) {
  22.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  23.             }
  24.         }
  25.         if (!xmlhttp) {
  26.             alert('您的浏览器不支持AJAX');
  27.             return false;
  28.         }
  29.         return xmlhttp;
  30.     };
  31.     this.send = function () {
  32.         C.each(self.options, function (key, val) {
  33.             self.options[key] = (args[key] == null) ? val : args[key];
  34.         });

  36.         var xmlHttp = new self.getXmlHttp();
  37.         if (self.options.type.toUpperCase() == 'GET') {
  38.             xmlHttp.open(self.options.type, self.options.url + (self.options.data == null ? "" : ((/[?]$/.test(self.options.url) ? '&' : '?') + self.options.data)), self.options.async);
  39.         }
  40.         else {
  41.             xmlHttp.open(self.options.type, self.options.url, self.options.async);
  42.             xmlHttp.setRequestHeader('Content-Length', self.options.data.length);
  43.         }
  44.         xmlHttp.setRequestHeader('Content-Type', self.options.contentType);
  45.         xmlHttp.onreadystatechange = function () {
  46.             if (xmlHttp.readyState == 4) {
  47.                 if (xmlHttp.status == 200 || xmlHttp.status == 0) {
  48.                     if (typeof self.options.success == 'function') self.options.success(xmlHttp.responseText);
  49.                     xmlHttp = null;
  50.                 }
  51.                 else {
  52.                     if (typeof self.options.error == 'function') self.options.error('Server Status: ' + xmlHttp.status);
  53.                 }
  54.             }
  55.         };

  57.         xmlHttp.send(self.options.type.toUpperCase() == 'POST' ? self.options.data.toString() : null);
  58.     };
  59.     this.send();
  60. };
复制代码

/* JS StringBuilder 用法 */
  1. function StringBuilder() {
  2.     this.strings = new Array;
  3. };
  4. StringBuilder.prototype.append = function (str) {
  5.     this.strings.push(str);
  6. };
  7. StringBuilder.prototype.toString = function () {
  8.     return this.strings.join('');
  9. };
复制代码

/* JS 加载到顶部LoadJS */
  1. function loadJS (url, fn) {
  2.         var ss = document.getElementsByName('script'),
  3.             loaded = false;
  4.         for (var i = 0, len = ss.length; i < len; i++) {
  5.             if (ss[i].src && ss[i].getAttribute('src') == url) {
  6.                 loaded = true;
  7.                 break;
  8.             }
  9.         }
  10.         if (loaded) {
  11.             if (fn && typeof fn != 'undefined' && fn instanceof Function) fn();
  12.             return false;
  13.         }
  14.         var s = document.createElement('script'),
  15.             b = false;
  16.         s.setAttribute('type', 'text/javascript');
  17.         s.setAttribute('src', url);
  18.         s.onload = s.onreadystatechange = function () {
  19.             if (!b && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
  20.                 b = true;
  21.                 if (fn && typeof fn != 'undefined' && fn instanceof Function) fn();
  22.             }
  23.         };
  24.         document.getElementsByTagName('head')[0].appendChild(s);
  25.     },
  26.     bind: function (objId, eventType, callBack) {  //适用于任何浏览器的绑定
  27.         var obj = document.getElementById(objId);
  28.         if (obj.addEventListener) {
  29.             obj.addEventListener(eventType, callBack, false);
  30.         }
  31.         else if (window.attachEvent) {
  32.             obj.attachEvent('on' + eventType, callBack);
  33.         }
  34.         else {
  35.             obj['on' + eventType] = callBack;
  36.         }
  37.     }

  39. function JSLoad (args) {
  40.         s = document.createElement("script");
  41.         s.setAttribute("type", "text/javascript");
  42.         s.setAttribute("src", args.url);
  43.         s.onload = s.onreadystatechange = function () {
  44.             if (!s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
  45.                 if (typeof args.callback == "function") args.callback(this, args);
  46.                 s.onload = s.onreadystatechange = null;
  47.                 try {
  48.                     s.parentNode && s.parentNode.removeChild(s);
  49.                 } catch (e) { }
  50.             }
  51.         };
  52.         document.getElementsByTagName("head")[0].appendChild(s);
  53.     }
复制代码

/* 清空 LoadJS 加载到顶部的js引用 */
  1. function ClearHeadJs  (src) {
  2.         var js = document.getElementsByTagName('head')[0].children;
  3.         var obj = null;
  4.         for (var i = 0; i < js.length; i++) {
  5.             if (js[i].tagName.toLowerCase() == "script" && js[i].attributes['src'].value.indexOf(src) > 0) {
  6.                 obj = js[i];
  7.             }
  8.         }
  9.         document.getElementsByTagName('head')[0].removeChild(obj);
  10.     };
复制代码

/* JS 替换非法字符主要用在密码验证上出现的特殊字符 */
  1. function URLencode(sStr) {
  2.         return escape(sStr).replace(/\+/g, '%2B').replace(/"/g, '%22').replace(/\'/g, '%27').replace(/\//g, '%2F');
  3.     };
复制代码

/* 按Ctrl + Entert 直接提交表单 */
  1. document.body.onkeydown = function (evt) {
  2.         evt = evt ? evt : (window.event ? window.event : null);
  3.         if (13 == evt.keyCode && evt.ctrlKey) {
  4.             evt.returnValue = false;
  5.             evt.cancel = true;
  6.             PostData();
  7.         }
  8.     };
复制代码

/* 获取当前时间 */
  1. function GetCurrentDate() {
  2.         var d = new Date();
  3.         var y = d.getYear()+1900;
  4.         month = add_zero(d.getMonth() + 1),
  5.         days = add_zero(d.getDate()),
  6.         hours = add_zero(d.getHours());
  7.         minutes = add_zero(d.getMinutes()),
  8.         seconds = add_zero(d.getSeconds());
  9.         var str = y + '-' + month + '-' + days + ' ' + hours + ':' + minutes + ':' + seconds;
  10.         return str;
  11.     };
  12.     function add_zero(temp) {
  13.         if (temp < 10) return "0" + temp;
  14.         else return temp;
  15.     }
复制代码

/* Js 去掉空格方法： */
  1. String.prototype.Trim = function()
  2. { return this.replace(/(^\s*)|(\s*$)/g, ""); }
  3. String.prototype.LTrim = function()
  4. {return this.replace(/(^\s*)/g, "");}
  5. String.prototype.RTrim = function()
  6. {return this.replace(/(\s*$)/g, "");}
复制代码

/* js 动态移除 head 里的 js 引用 */
  1. this.ClearHeadJs = function (src) {
  2.         var js = document.getElementsByTagName('head')[0].children;
  3.         var obj = null;
  4.         for (var i = 0; i < js.length; i++) {
  5.             if (js[i].tagName.toLowerCase() == "script" && js[i].attributes['src'].value.indexOf(src) > 0) {
  6.                 obj = js[i];
  7.             }
  8.         }
  9.         document.getElementsByTagName('head')[0].removeChild(obj);
  10.     };
复制代码

/* 整个UL 点击事件 加在UL里的onclick里 */
  1. function CreateFrom(url, params) {
  2.             var f = document.createElement("form");
  3.             f.setAttribute("action", url);
  4.             for (var i = 0; i < params.length; i++) {
  5.                 var input = document.createElement("input");
  6.                 input.setAttribute("type", "hidden");
  7.                 input.setAttribute("name", params[i].paramName);
  8.                 input.setAttribute("value", params[i].paramValue);
  9.                 f.appendChild(input);
  10.             }
  11.             f.target = "_blank";
  12.             document.body.appendChild(f);
  13.             f.submit();
  14.         };
复制代码

/* 判断浏览器使用的是哪个 JS 版本 */
  1. <script language="javascript">
  2.       var jsversion = 1.0;
  3.     </script>
  4.     <script language="javascript1.1">
  5.       jsversion = 1.1;
  6.     </script>
  7.     <script language="javascript1.2">
  8.       jsversion = 1.2;
  9.     </script>
  10.     <script language="javascript1.3">
  11.       jsversion = 1.3;
  12.     </script>
  13.     <script language="javascript1.4">
  14.       jsversion = 1.4;
  15.     </script>
  16.     <script language="javascript1.5">
  17.       jsversion = 1.5;
  18.     </script>
  19.     <script language="javascript1.6">
  20.       jsversion = 1.6;
  21.     </script>
  22.     <script language="javascript1.7">
  23.       jsversion = 1.7;
  24.     </script>
  25.     <script language="javascript1.8">
  26.       jsversion = 1.8;
  27.     </script>
  28.     <script language="javascript1.9">
  29.       jsversion = 1.9;
  30.     </script>
  31.     <script language="javascript2.0">
  32.       jsversion = 2.0;
  33.     </script>
  34. alert(jsversion);
复制代码

本文希望能给入门或迷茫的同学一些建议，合不合适只有自己才是最明白的，欢迎留言。另外新手学习前端开发除了要多动手敲代码最重要的还是经验的交流欢迎有需要的的小伙伴进前端开发交流群624293552来一起交流问题学习经验，我把所有比较适合新手学习的教程资料都放到里了。

   
关于葡萄城：全球最大的控件提供商，世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商，为超过75%的全球财富500强企业提供服务。

1 个回复

倒序浏览
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部