请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2017-4-19 09:25  /   查看:9461  /  回复: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';

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

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

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

/* 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.     }

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

/* 清空 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 个回复

倒序浏览
您需要登录后才可以回帖 登录 | 立即注册
返回顶部