100个直接可以拿来用的JavaScript实用功能代码片段(二)
31、原生JavaScript判断是否移动设备
1 function isMobile(){ 2 if (typeof this._isMobile === 'boolean'){ 3 return this._isMobile; 4 } 5 var screenWidth = this.getScreenWidth(); 6 var fixViewPortsExperiment = rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport; 7 var fixViewPortsExperimentRunning = fixViewPortsExperiment && (fixViewPortsExperiment.toLowerCase() === "new"); 8 if(!fixViewPortsExperiment){ 9 if(!this.isAppleMobileDevice()){10 screenWidth = screenWidth/window.devicePixelRatio;11 }12 }13 var isMobileScreenSize = screenWidth < 600;14 var isMobileUserAgent = false;15 this._isMobile = isMobileScreenSize && this.isTouchScreen();16 return this._isMobile;17 }?
32、原生JavaScript判断是否移动设备访问
1 function isMobileUserAgent(){2 return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));3 }?
33、原生JavaScript判断是否苹果移动设备访问
1 function isAppleMobileDevice(){2 return (/iphone|ipod|ipad|Macintosh/i.test(navigator.userAgent.toLowerCase()));3 }?
34、原生JavaScript判断是否安卓移动设备访问
1 function isAndroidMobileDevice(){2 return (/android/i.test(navigator.userAgent.toLowerCase()));3 }?
35、原生JavaScript判断是否Touch屏幕
1 function isTouchScreen(){2 return (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);3 }?
36、原生JavaScript判断是否在安卓上的谷歌浏览器
1 function isNewChromeOnAndroid(){ 2 if(this.isAndroidMobileDevice()){ 3 var userAgent = navigator.userAgent.toLowerCase(); 4 if((/chrome/i.test(userAgent))){ 5 var parts = userAgent.split('chrome/'); 6 7 var fullVersionString = parts[1].split(" ")[0]; 8 var versionString = fullVersionString.split('.')[0]; 9 var version = parseInt(versionString);10 11 if(version >= 27){12 return true;13 }14 }15 }16 return false;17 }?
37、原生JavaScript判断是否打开视窗
1 function isViewportOpen() {2 return !!document.getElementById('wixMobileViewport');3 }?
38、原生JavaScript获取移动设备初始化大小
1 function getInitZoom(){ 2 if(!this._initZoom){ 3 var screenWidth = Math.min(screen.height, screen.width); 4 if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){ 5 screenWidth = screenWidth/window.devicePixelRatio; 6 } 7 this._initZoom = screenWidth /document.body.offsetWidth; 8 } 9 return this._initZoom;10 }?
39、原生JavaScript获取移动设备最大化大小
1 function getZoom(){ 2 var screenWidth = (Math.abs(window.orientation) === 90) ? Math.max(screen.height, screen.width) : Math.min(screen.height, screen.width); 3 if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){ 4 screenWidth = screenWidth/window.devicePixelRatio; 5 } 6 var FixViewPortsExperiment = rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport; 7 var FixViewPortsExperimentRunning = FixViewPortsExperiment && (FixViewPortsExperiment === "New" || FixViewPortsExperiment === "new"); 8 if(FixViewPortsExperimentRunning){ 9 return screenWidth / window.innerWidth;10 }else{11 return screenWidth / document.body.offsetWidth;12 }13 }?
40、原生JavaScript获取移动设备屏幕宽度
1 function getScreenWidth(){ 2 var smallerSide = Math.min(screen.width, screen.height); 3 var fixViewPortsExperiment = rendererModel.runningExperiments.FixViewport || rendererModel.runningExperiments.fixviewport; 4 var fixViewPortsExperimentRunning = fixViewPortsExperiment && (fixViewPortsExperiment.toLowerCase() === "new"); 5 if(fixViewPortsExperiment){ 6 if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){ 7 smallerSide = smallerSide/window.devicePixelRatio; 8 } 9 }10 return smallerSide;11 }?
41、原生JavaScript完美判断是否为网址
1 function IsURL(strUrl) {2 var regular = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i3 if (regular.test(strUrl)) {4 return true;5 }6 else {7 return false;8 }9 }?
42、原生JavaScript根据样式名称检索元素对象
1 function getElementsByClassName(name) { 2 var tags = document.getElementsByTagName('*') || document.all; 3 var els = []; 4 for (var i = 0; i < tags.length; i++) { 5 if (tags[i].className) { 6 var cs = tags[i].className.split(' '); 7 for (var j = 0; j < cs.length; j++) { 8 if (name == cs[j]) { 9 els.push(tags[i]);10 break11 }12 }13 }14 }15 return els16 }?
43、原生JavaScript判断是否以某个字符串开头
1 String.prototype.startWith = function (s) {2 return this.indexOf(s) == 03 }?
44、原生JavaScript判断是否以某个字符串结束
1 String.prototype.endWith = function (s) {2 var d = this.length - s.length;3 return (d >= 0 && this.lastIndexOf(s) == d)4 }?
45、原生JavaScript返回IE浏览器的版本号
1 function getIE(){2 if (window.ActiveXObject){3 var v = navigator.userAgent.match(/MSIE ([^;]+)/)[1];4 return parseFloat(v.substring(0, v.indexOf(".")))5 }6 return false7 }?
46、原生JavaScript获取页面高度
1 function getPageHeight(){2 var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"3 ? a4 : g.documentElement;5 return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);6 }?
47、原生JavaScript获取页面scrollLeft
1 function getPageScrollLeft(){2 var a = document;3 return a.documentElement.scrollLeft || a.body.scrollLeft;4 }?
48、原生JavaScript获取页面可视宽度
1 function getPageViewWidth(){2 var d = document, a = d.compatMode == "BackCompat"3 ? d.body4 : d.documentElement;5 return a.clientWidth;6 }?
49、原生JavaScript获取页面宽度
1 function getPageWidth(){2 var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"3 ? a4 : g.documentElement;5 return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);6 }?
50、原生JavaScript获取页面scrollTop
1 function getPageScrollTop(){2 var a = document;3 return a.documentElement.scrollTop || a.body.scrollTop;4 }?
51、原生JavaScript获取页面可视高度
1 function getPageViewHeight() {2 var d = document, a = d.compatMode == "BackCompat"3 ? d.body4 : d.documentElement;5 return a.clientHeight;6 }?
52、原生JavaScript跨浏览器添加事件
1 function addEvt(oTarget,sEvtType,fnHandle){ 2 if(!oTarget){return;} 3 if(oTarget.addEventListener){ 4 oTarget.addEventListener(sEvtType,fnHandle,false); 5 }else if(oTarget.attachEvent){ 6 oTarget.attachEvent("on" + sEvtType,fnHandle); 7 }else{ 8 oTarget["on" + sEvtType] = fnHandle; 9 }10 }?
53、原生JavaScript跨浏览器删除事件
1 function delEvt(oTarget,sEvtType,fnHandle){ 2 if(!oTarget){return;} 3 if(oTarget.addEventListener){ 4 oTarget.addEventListener(sEvtType,fnHandle,false); 5 }else if(oTarget.attachEvent){ 6 oTarget.attachEvent("on" + sEvtType,fnHandle); 7 }else{ 8 oTarget["on" + sEvtType] = fnHandle; 9 }10 }?
54、原生JavaScript去掉url前缀
1 function removeUrlPrefix(a){2 a=a.replace(/：/g,":").replace(/．/g,".").replace(/／/g,"/");3 while(trim(a).toLowerCase().indexOf("http://")==0){4 a=trim(a.replace(/http:\/\//i,""));5 }6 return a;7 }?
55、原生JavaScript随机数时间戳
1 function uniqueId(){2 var a=Math.random,b=parseInt;3 return Number(new Date()).toString()+b(10*a())+b(10*a())+b(10*a());4 }?
56、原生JavaScript全角半角转换,iCase: 0全到半，1半到全，其他不转化
1 function chgCase(sStr,iCase){ 2 if(typeof sStr != "string" || sStr.length <= 0 || !(iCase === 0 || iCase == 1)){ 3 return sStr; 4 } 5 var i,oRs=[],iCode; 6 if(iCase){/*半->全*/ 7 for(i=0; i<sStr.length;i+=1){ 8 iCode = sStr.charCodeAt(i); 9 if(iCode == 32){10 iCode = 12288; 11 }else if(iCode < 127){12 iCode += 65248;13 }14 oRs.push(String.fromCharCode(iCode)); 15 } 16 }else{/*全->半*/17 for(i=0; i<sStr.length;i+=1){ 18 iCode = sStr.charCodeAt(i);19 if(iCode == 12288){20 iCode = 32;21 }else if(iCode > 65280 && iCode < 65375){22 iCode -= 65248; 23 }24 oRs.push(String.fromCharCode(iCode)); 25 } 26 } 27 return oRs.join(""); 28 }?
57、原生JavaScript确认是否键盘有效输入值
1 function checkKey(iKey){ 2 if(iKey == 32 || iKey == 229){return true;}/*空格和异常*/ 3 if(iKey>47 && iKey < 58){return true;}/*数字*/ 4 if(iKey>64 && iKey < 91){return true;}/*字母*/ 5 if(iKey>95 && iKey < 108){return true;}/*数字键盘1*/ 6 if(iKey>108 && iKey < 112){return true;}/*数字键盘2*/ 7 if(iKey>185 && iKey < 193){return true;}/*符号1*/ 8 if(iKey>218 && iKey < 223){return true;}/*符号2*/ 9 return false;10 }?
58、原生JavaScript获取网页被卷去的位置
1 function getScrollXY() {2 return document.body.scrollTop ? {3 x: document.body.scrollLeft,4 y: document.body.scrollTop5 }: {6 x: document.documentElement.scrollLeft,7 y: document.documentElement.scrollTop8 }9 }?
59、原生JavaScript另一种正则日期格式化函数+调用方法
1 Date.prototype.format = function(format){ //author: meizz 2 var o = { 3 "M+" : this.getMonth()+1, //month 4 "d+" : this.getDate(), //day 5 "h+" : this.getHours(), //hour 6 "m+" : this.getMinutes(), //minute 7 "s+" : this.getSeconds(), //second 8 "q+" : Math.floor((this.getMonth()+3)/3), //quarter 9 "S" : this.getMilliseconds() //millisecond10 }11 if(/(y+)/.test(format)) format=format.replace(RegExp.$1,12 (this.getFullYear()+"").substr(4 - RegExp.$1.length));13 for(var k in o)if(new RegExp("("+ k +")").test(format))14 format = format.replace(RegExp.$1,15 RegExp.$1.length==1 ? o[k] :16 ("00"+ o[k]).substr((""+ o[k]).length));17 return format;18 }19 alert(new Date().format("yyyy-MM-dd hh:mm:ss"));?
60、原生JavaScript时间个性化输出功能
1 /* 2 1、< 60s, 显示为“刚刚” 3 2、>= 1min && < 60 min, 显示与当前时间差“XX分钟前” 4 3、>= 60min && < 1day, 显示与当前时间差“今天 XX:XX” 5 4、>= 1day && < 1year, 显示日期“XX月XX日 XX:XX” 6 5、>= 1year, 显示具体日期“XXXX年XX月XX日 XX:XX” 7 */ 8 function timeFormat(time){ 9 var date = new Date(time)10 , curDate = new Date()11 , year = date.getFullYear()12 , month = date.getMonth() + 113 , day = date.getDate()14 , hour = date.getHours()15 , minute = date.getMinutes()16 , curYear = curDate.getFullYear()17 , curHour = curDate.getHours()18 , timeStr;19 20 if(year < curYear){21 timeStr = year +'年'+ month +'月'+ day +'日 '+ hour +':'+ minute;22 }else{23 var pastTime = curDate - date24 , pastH = pastTime/3600000;25 26 if(pastH > curHour){27 timeStr = month +'月'+ day +'日 '+ hour +':'+ minute;28 }else if(pastH >= 1){29 timeStr = '今天 ' + hour +':'+ minute +'分';30 }else{31 var pastM = curDate.getMinutes() - minute;32 if(pastM > 1){33 timeStr = pastM +'分钟前';34 }else{35 timeStr = '刚刚';36 }37 }38 }39 return timeStr;40 }?
61、原生JavaScript解决offsetX兼容性问题
1 // 针对火狐不支持offsetX/Y 2 function getOffset(e){ 3 var target = e.target, // 当前触发的目标对象 4 eventCoord, 5 pageCoord, 6 offsetCoord; 7 8 // 计算当前触发元素到文档的距离 9 pageCoord = getPageCoord(target);10 11 // 计算光标到文档的距离12 eventCoord = {13 X : window.pageXOffset + e.clientX,14 Y : window.pageYOffset + e.clientY15 };16 17 // 相减获取光标到第一个定位的父元素的坐标18 offsetCoord = {19 X : eventCoord.X - pageCoord.X,20 Y : eventCoord.Y - pageCoord.Y21 };22 return offsetCoord;23 }24 25 function getPageCoord(element){26 var coord = { X : 0, Y : 0 };27 // 计算从当前触发元素到根节点为止，28 // 各级 offsetParent 元素的 offsetLeft 或 offsetTop 值之和29 while (element){30 coord.X += element.offsetLeft;31 coord.Y += element.offsetTop;32 element = element.offsetParent;33 }34 return coord;35 }?
62、原生JavaScript常用的正则表达式
1 //正整数 2 /^[0-9]*[1-9][0-9]*$/; 3 //负整数 4 /^-[0-9]*[1-9][0-9]*$/; 5 //正浮点数 6 /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/; 7 //负浮点数 8 /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; 9 //浮点数10 /^(-?\d+)(\.\d+)?$/;11 //email地址12 /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;13 //url地址14 /^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/;15 //年/月/日（年-月-日、年.月.日）16 /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;17 //匹配中文字符18 /[\u4e00-\u9fa5]/;19 //匹配帐号是否合法(字母开头，允许5-10字节，允许字母数字下划线)20 /^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;21 //匹配空白行的正则表达式22 /\n\s*\r/;23 //匹配中国邮政编码24 /[1-9]\d{5}(?!\d)/;25 //匹配身份证26 /\d{15}|\d{18}/;27 //匹配国内电话号码28 /(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/;29 //匹配IP地址30 /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;31 //匹配首尾空白字符的正则表达式32 /^\s*|\s*$/;33 //匹配HTML标记的正则表达式34 < (\S*?)[^>]*>.*?|< .*? />;?
63、原生JavaScript实现返回顶部的通用方法
1 function backTop(btnId) { 2 var btn = document.getElementById(btnId); 3 var d = document.documentElement; 4 var b = document.body; 5 window.onscroll = set; 6 btn.style.display = "none"; 7 btn.onclick = function() { 8 btn.style.display = "none"; 9 window.onscroll = null;10 this.timer = setInterval(function() {11 d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);12 b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);13 if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);14 },15 10);16 };17 function set() {18 btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"19 }20 };21 backTop('goTop');?
64、原生JavaScript获得URL中GET参数值
1 // 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"] 2 function get_get(){ 3 querystr = window.location.href.split("?") 4 if(querystr[1]){ 5 GETs = querystr[1].split("&") 6 GET =new Array() 7 for(i=0;i<GETs.length;i++){ 8 tmp_arr = GETs[i].split("=") 9 key=tmp_arr[0]10 GET[key] = tmp_arr[1]11 }12 }13 return querystr[1];14 }?
65、原生JavaScript实现全选通用方法
1 function checkall(form, prefix, checkall) {2 var checkall = checkall ? checkall : 'chkall';3 for(var i = 0; i < form.elements.length; i++) {4 var e = form.elements[i];5 if(e.type=="checkbox"){6 e.checked = form.elements[checkall].checked;7 }8 }9 }?
66、原生JavaScript实现全部取消选择通用方法
1 function uncheckAll(form) {2 for (var i=0;i<form.elements.length;i++){3 var e = form.elements[i];4 if (e.name != 'chkall')5 e.checked=!e.checked;6 }7 }?
67、原生JavaScript实现打开一个窗体通用方法
1 function openWindow(url,windowName,width,height){ 2 var x = parseInt(screen.width / 2.0) - (width / 2.0); 3 var y = parseInt(screen.height / 2.0) - (height / 2.0); 4 var isMSIE= (navigator.appName == "Microsoft Internet Explorer"); 5 if (isMSIE) { 6 var p = "resizable=1,location=no,scrollbars=no,width="; 7 p = p+width; 8 p = p+",height="; 9 p = p+height;10 p = p+",left=";11 p = p+x;12 p = p+",top=";13 p = p+y;14 retval = window.open(url, windowName, p);15 } else {16 var win = window.open(url, "ZyiisPopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" );17 eval("try { win.resizeTo(width, height); } catch(e) { }");18 win.focus();19 }20 }?
68、原生JavaScript判断是否为客户端设备
1 function client(o){ 2 var b = navigator.userAgent.toLowerCase(); 3 var t = false; 4 if (o == 'isOP'){ 5 t = b.indexOf('opera') > -1; 6 } 7 if (o == 'isIE'){ 8 t = b.indexOf('msie') > -1; 9 }10 if (o == 'isFF'){11 t = b.indexOf('firefox') > -1;12 }13 return t;14 }?
69、原生JavaScript获取单选按钮的值
1 function get_radio_value(field){ 2 if(field&&field.length){ 3 for(var i=0;i<field.length;i++){ 4 if(field[i].checked){ 5 return field[i].value; 6 } 7 } 8 }else { 9 return ; 10 } 11 }?
70、原生JavaScript获取复选框的值
1 function get_checkbox_value(field){ 2 if(field&&field.length){ 3 for(var i=0;i<field.length;i++){ 4 if(field[i].checked && !field[i].disabled){ 5 return field[i].value; 6 } 7 } 8 }else { 9 return;10 } 11 }