好贷网好贷款

在b/s开发中经常用到的javaScript技术

发布时间:2016-12-4 20:23:08 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"在b/s开发中经常用到的javaScript技术",主要涉及到在b/s开发中经常用到的javaScript技术方面的内容,对于在b/s开发中经常用到的javaScript技术感兴趣的同学可以参考一下。

在b/s开发中经常用到的javaScript技术 有些是参照hrong(黄蓉)的给出的答案。也有是自己以前写的例子或者是从网上搜索到的。   一、验证类1、数字验证内1.1 整数/^(-|/+)?/d+$/  不可以为空/^[-+]?/d*$/ 可以为空1.2 大于0的整数 (用于传来的ID的验证)/^/d+$/1.3 负整数的验证/^-/d+$/1.4 整数不能大于iMax根据上面的正则可以写出。1.5 整数不能小于iMin根据上面的正则可以写出。2、时间类2.1 短时间,形如 (13:04:06)    function isTime(str){var a = str.match(/^(/d{1,2})(:)?(/d{1,2})/2(/d{1,2})$/);if (a == null) {alert('输入的参数不是时间格式'); return false;}if (a[1]>24 || a[3]>60 || a[4]>60){alert("时间格式不对");return false}return true;} 2.2 短日期,形如 (2003-12-05)function strDateTime(str){var r = str.match(/^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2})$/); if(r==null)return false; var d= new Date(r[1], r[3]-1, r[4]); return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);} 2.3 长时间,形如 (2003-12-05 13:04:06)function strDateTime(str){var reg = /^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2}) (/d{1,2}):(/d{1,2}):(/d{1,2})$/; var r = str.match(reg); if(r==null)return false; var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]); return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);} 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03)3、表单类3.1 所有的表单的值都不能为空<input onblur="if(this.value.replace(/^/s+|/s+$/g,'')=='')alert('不能为空!')"> 3.2 多行文本框的值不能为空。3.3 多行文本框的值不能超过sMaxStrleng//检验文本框中内容是否超长function CheckTextareaLength(val, max_length) {var str_area=document.forms[0].elements[val].value;if (str_area!=null&&str_area.length > max_length){alert("字段文字超长,最多可输入" + max_length +"个字符,请重新输入!");document.forms[0].elements[val].focus();document.forms[0].elements[val].select();return false;}return true;}3.4 多行文本框的值不能少于sMixStrleng3.5 判断单选框是否选择。 function CheckRadio(val,msg1,msg2){var is_radio=document.forms[0].elements[val];var s_msg1=(msg1==null || msg1=="")? "请选择 radio!":msg1;var s_msg2=(msg2==null || msg2=="")? "没有可选的 radio!":msg2; if(is_radio){if (document.forms[0].elements[val].value != null){if (document.forms[0].elements[val].checked){return true;}else{alert(s_msg1);return false;}}else{var check_length = document.forms[0].elements[val].length;var i_count=0for(var i=0;i<check_length;i++){if (document.forms[0].elements[val](i).checked){i_count=i_count+1;return true;}}if(i_count==0){alert(s_msg1);return false;}}}//else{alert(s_msg2);return false;} }3.6 判断复选框是否选择.function CheckCheckbox(val,msg1,msg2){var is_radio=document.forms[0].elements[val];var s_msg1=(msg1==null || msg1=="")? "请选择CheckBox!":msg1;var s_msg2=(msg2==null || msg2=="")? "没有可选的CheckBox!":msg2; if(is_radio){if (document.forms[0].elements[val].value != null){if (document.forms[0].elements[val].checked){return true;}else{alert(s_msg1);return false;}}else{var check_length = document.forms[0].elements[val].length;var i_count=0for(var i=0;i<check_length;i++){if (document.forms[0].elements[val](i).checked){i_count=i_count+1;return true;}}if(i_count==0){alert(s_msg1);return false;}}}//else{alert(s_msg2);return false;} }3.7 复选框的全选,多选,全不选,反选<form name=hrong><input type=checkbox name=All onclick="checkAll('mm')">全选<br/><input type=checkbox name=mm onclick="checkItem('All')"><br/><input type=checkbox name=mm onclick="checkItem('All')"><br/><input type=checkbox name=mm onclick="checkItem('All')"><br/><input type=checkbox name=mm onclick="checkItem('All')"><br/><input type=checkbox name=mm onclick="checkItem('All')"><br/><br/> <input type=checkbox name=All2 onclick="checkAll('mm2')">全选<br/><input type=checkbox name=mm2 onclick="checkItem('All2')"><br/><input type=checkbox name=mm2 onclick="checkItem('All2')"><br/><input type=checkbox name=mm2 onclick="checkItem('All2')"><br/><input type=checkbox name=mm2 onclick="checkItem('All2')"><br/><input type=checkbox name=mm2 onclick="checkItem('All2')"><br/> </form> <SCRIPT LANGUAGE="javascript">function checkAll(str){var a = document.getElementsByName(str);var n = a.length;for (var i=0; i<n; i++)a[i].checked = window.event.srcElement.checked;}function checkItem(str){var e = window.event.srcElement;var all = eval("document.hrong."+ str);if (e.checked){var a = document.getElementsByName(e.name);all.checked = true;for (var i=0; i<a.length; i++){if (!a[i].checked){ all.checked = false; break;}}}else all.checked = false;}</SCRIPT> 3.8 文件上传过程中判断文件类型<input type=file onchange="alert(this.value.match(/^(.*)(/.)(.{1,8})$/)[3])"> 4、字符类4.1 判断字符全部由a-Z或者是A-Z的字字母组成<input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">4.2 判断字符由字母和数字组成。<input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')"> 4.3 判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母/^([a-zA-z_]{1})([/w]*)$/g.test(str) 4.4 字符串替换函数.Replace();5、浏览器类5.1 判断浏览器的类型window.navigator.appName5.2 判断ie的版本window.navigator.appVersion5.3 判断客户端的分辨率window.screen.height; window.screen.width;6、结合类6.1 email的判断。function ismail(mail){return(new RegExp(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/).test(mail));} 6.2 手机号码的验证6.3 身份证的验证function isIdCardNo(num){if (isNaN(num)) {alert("输入的不是数字!"); return false;}var len = num.length, re; if (len == 15)re = new RegExp(/^(/d{6})()?(/d{2})(/d{2})(/d{2})(/d{3})$/);else if (len == 18)re = new RegExp(/^(/d{6})()?(/d{4})(/d{2})(/d{2})(/d{3})(/d)$/);else {alert("输入的数字位数不对!"); return false;}var a = num.match(re);if (a != null){if (len==15){var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];}else{var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];}if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对!"); return false;}}return true;}   另外一个<script>var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}function cidInfo(sId){var iSum=0var info=""if(!/^/d{17}(/d|x)$/i.test(sId))return false;sId=sId.replace(/x$/i,"a");if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));var d=new Date(sBirthday.replace(/-/g,"/"))if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)if(iSum%11!=1)return "Error:非法证号";return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")} document.write(cidInfo("380524198002300016"),"<br/>");document.write(cidInfo("340524198002300019"),"<br/>")document.write(cidInfo("340524197711111111"),"<br/>")document.write(cidInfo("34052419800101001x"),"<br/>");</script>6.4 ip地址校验<SCRIPT LANGUAGE="javascript">function isip(s){var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}};var re=s.split(".")return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false} var s="202.197.78.129";alert(isip(s))</SCRIPT>6.5 .加sp1后还能用的无边框窗口!!<HTML XMLNS:IE><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><IE:Download ID="include" STYLE="behavior:url(#default#download)" /><title>Chromeless Window</title> <SCRIPT LANGUAGE="JScript">/*--- Special Thanks For andot ---*/ /*This following code are designed and writen by Windy_sk <[email protected]>You can use it freely, but u must held all the copyright items!*/ /*--- Thanks For andot Again ---*/ var CW_width = 400;var CW_height = 300;var CW_top = 100;var CW_left = 100;var CW_url = "/";var New_CW = window.createPopup();var CW_Body = New_CW.document.body;var content = "";var CSStext = "margin:1px;color:black; border:2px outset;border-style:expression(onmouseout=onmouseup=function(){this.style.borderStyle='outset'}, onmousedown=function(){if(event.button!=2)this.style.borderStyle='inset'});background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:Default;"; //Build Windowinclude.startDownload(CW_url, function(source){content=source}); function insert_content(){var temp = "";CW_Body.style.overflow = "hidden";CW_Body.style.backgroundColor = "white";CW_Body.style.border = "solid black 1px";content = content.replace(/<a ([^>]*)>/g,"<a onclick='parent.open(this.href);return false' $1>");temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>";temp += "<tr style=';font-size:12px;background:#0099CC;height:20;cursor:default' ondblclick=/"Max.innerText=Max.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();/" onmouseup='parent.drag_up(event)' onmousemove='parent.drag_move(event)' onmousedown='parent.drag_down(event)' onselectstart='return false' oncontextmenu='return false'>";temp += "<td style='color:#ffffff;padding-left:5px'>Chromeless Window For IE6 SP1</td>";temp += "<td style='color:#ffffff;padding-right:5px;' align=right>";temp += "<span id=Help onclick=/"alert('Chromeless Window For IE6 SP1 - Ver 1.0//n//nCode By Windy_sk//n//nSpecial Thanks For andot')/" style=/""+CSStext+"font-family:System;padding-right:2px;/">?</span>";temp += "<span id=Min onclick='parent.New_CW.hide();parent.blur()' style=/""+CSStext+"font-family:Webdings;/" title='Minimum'>0</span>";temp += "<span id=Max onclick=/"this.innerText=this.innerText=='1'?'2':'1';parent.if_max=!parent.if_max;parent.show_CW();/" style=/""+CSStext+"font-family:Webdings;/" title='Maximum'>1</span>";temp += "<span id=Close onclick='parent.opener=null;parent.close()' style=/""+CSStext+"font-family:System;padding-right:2px;/" title='Close'>x</span>";temp += "</td></tr><tr><td colspan=2>";temp += "<div id=include style='overflow:scroll;overflow-x:hidden;overflow-y:auto; HEIGHT: 100%; width:"+CW_width+"'>";temp += content;temp += "</div>";temp += "</td></tr></table>";CW_Body.innerHTML = temp;} setTimeout("insert_content()",1000); var if_max = true;function show_CW(){window.moveTo(10000, 10000);if(if_max){New_CW.show(CW_top, CW_left, CW_width, CW_height);if(typeof(New_CW.document.all.include)!="undefined"){New_CW.document.all.include.style.width = CW_width;New_CW.document.all.Max.innerText = "1";}}else{New_CW.show(0, 0, screen.width, screen.height);New_CW.document.all.include.style.width = screen.width;}} window.onfocus = show_CW;window.onresize = show_CW; // Move Windowvar drag_x,drag_y,draging=false function drag_move(e){if (draging){New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height);return false;}} function drag_down(e){if(e.button==2)return;if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return;drag_x=e.clientX;drag_y=e.clientY;draging=true;e.srcElement.setCapture();} function drag_up(e){draging=false;e.srcElement.releaseCapture();if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return;CW_top = e.screenX-drag_x;CW_left = e.screenY-drag_y;} </SCRIPT></HTML> 6.6 电话号码的验证 要求:  (1)电话号码由数字、"("、")"和"-"构成  (2)电话号码为3到8位  (3)如果电话号码中包含有区号,那么区号为三位或四位  (4)区号用"("、")"或"-"和其他部分隔开  (5)移动电话号码为11或12位,如果为12位,那么第一位为0  (6)11位移动电话号码的第一位和第二位为"13"  (7)12位移动电话号码的第二位和第三位为"13"  根据这几条规则,可以与出以下正则表达式:  (^[0-9]{3,4}/-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^/([0-9]{3,4}/)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$) <script language="javascript">function PhoneCheck(s) {var str=s;var reg=/(^[0-9]{3,4}/-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^/([0-9]{3,4}/)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/alert(reg.test(str));}</script><input type=text name="iphone"><input type=button onclick="PhoneCheck(document.all.iphone.value)" value="Check"> 二、功能类 1、时间与相关控件类1.1 日历精华区的日历 1.2 时间控件 1.3 万年历http://202.112.86.128/studentspace/aqyw/js/calendars/rili/1.4 显示动态显示时钟效果(文本,如OA中时间)特效很容易找到的1.5 显示动态显示时钟效果 (图像,像手表) 特效很容易找到的2、表单类2.1 自动生成表单2.2 动态添加,修改,删除下拉框中的元素大版主的js宝库里面的对select 的操作已经可以是精品了。2.3 可以输入内容的下拉框 2.4 多行文本框中只能输入iMax文字。如果多输入了,自动减少到iMax个文字(多用于短信发送)3、打印类3.1 打印控件<HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><SCRIPT LANGUAGE=javascript><!--function setPrint(){WB.ExecWB(8,1);}function previewPrint(){WB.ExecWB(7,1)} //--></SCRIPT><script language=vbscript>function setup_pageDim wshSet wsh = CreateObject("WScript.Shell")on error resume next wsh.RegWrite "HKCU/Software/Microsoft/Internet explorer/PageSetup/header", "", "REG_SZ"wsh.RegWrite "HKCU/Software/Microsoft/Internet Explorer/PageSetup/footer", "", "REG_SZ" end function </script> </HEAD> <BODY><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WB width=0></OBJECT><INPUT type="button" value="Set" id=button1 name=button1 onclick="setPrint();"><INPUT type="button" value="Preview" id=button2 name=button2 onclick="previewPrint();"><INPUT type="button" value="setup" id=button2 name=button2 onclick="setup_page();"></BODY></HTML> 4、事件类4.1 屏蔽右键4.2 屏蔽所有功能键4.3 --> 和<-- F5 F11,F9,F14.4 屏蔽组合键ctrl+N<script>//禁止ctrl+n和 禁止ctrl+r和 禁止shift+f10 禁止鼠标右键or左右键 和禁止f5var oLastBtn=0,bIsMenu=false if (window.Event){document.captureEvents(Event.MOUSEUP); } function nocontextmenu(){ event.cancelBubble=true;event.returnvalue=false; return false; } function norightclick(e) { if(window.Event) { if (e.which !=1){return false; }} else if(event.button!=1) { event.cancelBubble=true;event.returnvalue=false; return false; } } document.oncontextmenu=nocontextmenu; document.onmousedown=norightclick; function onKeyDown(){if ((event.altKey)||((event.keyCode==8)&&(event.srcElement.type!="text"&&event.srcElement.type!="textarea"&&event.srcElement.type!="password"))||((event.ctrlKey)&&((event.keyCode==78)||(event.keyCode==82)))||(event.keyCode==116)){alert(event.keyCode);event.keyCode=0;event.returnvalue=false;}}</script><body onkeydown="onKeyDown()"><body></html>5、网页设计类5.1 连续滚动的文字,图片(注意是连续的,两段文字和图片中没有空白出现)5.2 html编辑控件类5.3 颜色选取框控件5.4 下拉菜单5.5 两层或多层次的下拉菜单5.6 仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目)5.7 状态栏,title栏的动态效果(例子很多,可以研究一下)5.8 双击后,网页自动滚屏以上都是特效类,很容易找到的。6、树型结构。6.1 asp+SQL版6.2 asp+xml+sql版6.3 java+sql或者java+sql+xml7、无边框效果的制作8、连动下拉框技术9、文本排序10,画图类,含饼、柱、矢量贝滋曲线<OBJECT id=S style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px" height=240 width=392 classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6"></OBJECT><SCRIPT>S.DrawingSurface.ArcDegrees(0,0,0,30,50,60);S.DrawingSurface.ArcRadians(30,0,0,30,50,60);S.DrawingSurface.Line(10,10,100,100);</SCRIPT> 11,操纵客户端注册表类<SCRIPT>var WshShell = WScript.CreateObject("WScript.Shell");WshShell.RegWrite ("HKCU//Software//ACME//FortuneTeller//", 1, "REG_BINARY");WshShell.RegWrite ("HKCU//Software//ACME//FortuneTeller//MindReader", "Goocher!", "REG_SZ");var bKey = WshShell.RegRead ("HKCU//Software//ACME//FortuneTeller//");WScript.Echo (WshShell.RegRead ("HKCU//Software//ACME//FortuneTeller//MindReader"));WshShell.RegDelete ("HKCU//Software//ACME//FortuneTeller//MindReader");WshShell.RegDelete ("HKCU//Software//ACME//FortuneTeller//");WshShell.RegDelete ("HKCU//Software//ACME//");</SCRIPT> 12,DIV层相关(拖拽、显示、隐藏、移动、增加)13,TABLAE相关(客户端动态增加行列,模拟进度条,滚动列表等)<HTML><SCRIPT LANGUAGE="JScript">function numberCells() {var count=0;for (i=0; i < document.all.mytable.rows.length; i++) {for (j=0; j < document.all.mytable.rows(i).cells.length; j++) {document.all.mytable.rows(i).cells(j).innerText = count;count++;}}}</SCRIPT><BODY onload="numberCells()"><TABLE id=mytable border=1><TR><TH>&nbsp;</TH><TH>&nbsp;</TH><TH>&nbsp;</TH><TH>&nbsp;</TH></TR><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR><TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR></TABLE></BODY></HTML> 14,各种<object classid=>相关类,如播放器,flash与脚本互动等16, 刷新/模拟无刷新 异步调用类(XMLHttp或iframe,frame) <script language="JavaScript" type="text/JavaScript"> //改变图片大小 function resizepic(thispic) { if(thispic.width>700) thispic.width=700; } //无级缩放图片大小 function bbimg(o) { var zoom=parseInt(o.style.zoom, 10)||100; zoom+=event.wheelDelta/12; if (zoom>0) o.style.zoom=zoom+'%'; } //双击鼠标滚动屏幕的代码 var currentpos,timer; function initialize() { timer=setInterval ("scrollwindow ()",30); } function sc() { clearInterval(timer); } function scrollwindow() { currentpos=document.body.scrollTop; window.scroll(0,++currentpos); if (currentpos !=document.body.scrollTop) sc(); } document.onmousedown=sc document.ondblclick=initialize //更改字体大小 var status0=''; var curfontsize=10; var curlineheight=18; function fontZoomA(){ if(curfontsize>8){ document.getElementById('fontzoom').style.fontSize=(--curfontsize)+'pt'; document.getElementById('fontzoom').style.lineHeight=(--curlineheight)+'pt'; } } function fontZoomB(){ if(curfontsize<64){ document.getElementById('fontzoom').style.fontSize=(++curfontsize)+'pt'; document.getElementById('fontzoom').style.lineHeight=(++curlineheight)+'pt'; } } </script>   

上一篇:又一个Blog
下一篇:丑的境界(转自猪股Blog)

相关文章

相关评论