javascript常用函数(1)
文章主要内容列表:
1、 调整图片大小,不走形(FFIE兼容)/剪切图片(overflow:hidden)
2、 控制textarea区域文字数量
3、 点击显示新窗口
4、 input框自动随内容自动变长
5、 添加收藏夹
6、 设置首页
7、 Jquery+Ajax判断用户是否存在
8、 判断email格式是否正确
9、 综合判断用户名(长度,英文字段等)
10、新闻滚动
11、只允许输入正整数(shoppingcart使用)或者正数(正整数和正小数)
12、转换字符串为数字
13、判断文件格式(获得文件后缀)
14、截取字符串
15、分割字符串
主要内容 :
1、调整图片大小,不走形(FFIE兼容)
//用法<imgsrc="this_image_path.jpg"onload="DrawImage(this,450,450);"/> functionDrawImage(ImgD,FitWidth,FitHeight){ varimage=newImage(); image.src=ImgD.src; if(image.width>0&&image.height>0){ if(image.width/image.height>=FitWidth/FitHeight){ if(image.width>FitWidth){ ImgD.width=FitWidth; ImgD.height=(image.height*FitWidth)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } }else{ if(image.height>FitHeight){ ImgD.height=FitHeight; ImgD.width=(image.width*FitHeight)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } } } }
通过overflow:hidden进行剪切:
functionclipImage(o,w,h){ varimg=newImage(); img.src=o.src; if(img.width>0&&img.height>0) { if(img.width/img.height>=w/h) { if(img.width>w) { o.width=(img.width*h)/img.height; o.height=h; //o.setAttribute("style","marginLeft:-"+((o.width-w)/2).toString()+"px"); $(o).css("margin-left","-"+((o.width-w)/2).toString()+"px"); } else { o.width=img.width; o.height=img.height; } } else { if(img.height>h) { o.height=(img.height*w)/img.width; o.width=w; //o.setAttribute("style","margin-top:-"+((o.height-h)/2).toString()+"px"); //$(o).css("style","margin-top:-"+((o.height-h)/2).toString()+"px"); $(o).css("margin-top","-"+((o.height-h)/2).toString()+"px"); } else { o.width=img.width; o.height=img.height; } } } }
实例:
<styletype="text/css"> ul{list-style:none;} ulli{float:left;padding:1px;border:#ccc1pxsolid;width:120px;height:120px;overflow:hidden;text-align:center;over-flow:hidden;} </style> <ul> <li><imgsrc="1.jpg"onload="DrawImage(this,120,120);"/></li> <li><imgsrc="2.jpg"onload="clipImage(this,120,120);"/></li> </ul>
2、控制textarea区域文字数量
<script> /** *Calculatehowmanycharactersremaininatextarea(jQuery) *@paramstringtextarea *@paramintmaxLength *@paramstringdiv */ functioncharsRemain(textarea,maxLength,div){ varcurrentLength=$(textarea).val().length; varcharsLeft=maxLength-currentLength; if(charsLeft<0){charsLeft=0;} $("#"+div+"_charsRemain").html(charsLeft); if(currentLength>maxLength){ varfullText=$(textarea).val().substring(0,maxLength); $(textarea).val(fullText); } } /** *Calculatehowmanycharactersremaininatextarea(javascript) *@paramstringtextarea *@paramintmaxLength *@paramstringdiv */ functioncharsRemain(textarea,maxLength,div){ varcurrentLength=textarea.value.length; varcharsLeft=maxLength-currentLength; if(charsLeft<0){charsLeft=0;} document.getElementById(div+"_charsRemain").innerHTML=charsLeft; if(currentLength>maxLength){ varfullText=textarea.value.substring(0,maxLength); textarea.value=fullText; } } </script> <textarearows="5"cols="15"onkeyup="charsRemain(this,250,'textarea');"></textarea> <spanid="textarea_charsRemain">250</span>charactersremaining
3、点击显示新窗口
//弹窗 functiong_OpenWindow(pageURL,innerWidth,innerHeight) { varScreenWidth=screen.availWidth varScreenHeight=screen.availHeight varStartX=(ScreenWidth-innerWidth)/2 varStartY=(ScreenHeight-innerHeight)/2 varwins=window.open(pageURL,'OpenWin','left='+StartX+',top='+StartY+',Width='+innerWidth+',height='+innerHeight+',resizable=yes,scrollbars=yes,status=no,toolbar=no,menubar=no,location=no') wins.focus(); }
Java代码 :
<scriptlanguage="JavaScript"> //自动弹出窗口 varwhatsNew=open('','_blank','top=50,left=50,width=200,height=300,'+'menubar=no,toolbar=no,directories=no,location=no,'+'status=no,resizable=no,scrollbars=yes'); whatsNew.document.write('<center><b>news</b></center>'); whatsNew.document.write('<p>thisisatest'); whatsNew.document.write('<p>deosaddress'); whatsNew.document.write('<palign="right">'+'<ahref="javascript:self.close()">Close</a>'); whatsNew.document.close(); </script>
不幸的是,很多浏览器会屏蔽弹出窗口,你需要手动允许后方可看到!下面是强制弹出窗口,原理就是创建一个form,通过post打开。
<scriptlanguage="javascript"> functionForceWindow(){ this.r=document.documentElement; this.f=document.createElement("FORM"); this.f.target="_blank"; this.f.method="post"; this.r.insertBefore(this.f,this.r.childNodes[0]);//XMLDOM:insertBefore()方法可在已有的子节点前插入一个新的子节点。insertBefore(newchild,refchild) } ForceWindow.prototype.pop=function(sUrl){ this.f.action=sUrl; this.f.submit(); } window.force=newForceWindow(); </script> <bodyonLoad="window.force.pop('http://deographics.com/')"> <div> thisisatest!wewillopenthedeographics'swebsite~~ </div> </body>
当然还有更好的办法就是
<script> functionopenWin(){ window.showModalDialog(url,window,"help:no;scroll:no;resizable:no;status:0;dialogWidth:420px;dialogHeight:200px;center:yes"); } </script>
4、input框自动随内容自动变长
//inputautolength //<inputname="words"size="2"maxlength="100"onkeyup="checkLength(this)"/><spanid="char">0</span> functioncheckLength(which){ varmaxchar=100; //varoTextCount=document.getElementById("char"); iCount=which.value.replace(/[^\u0000-\u00ff]/g,"aa").length; if(iCount<=maxchar){ //oTextCount.innerHTML="<fontcolor=#FF0000>"+iCount+"</font>"; which.style.border='1pxdotted#FF0000'; which.size=iCount+2; }else{ alert('Pleaseinputletterlessthan'+maxchar); } }
5、添加收藏夹
//addfavorite functionaddfavorite(){ if(document.all){ window.external.addFavorite('http://deographics.com/','deographics'); }elseif(window.sidebar){ window.sidebar.addPanel('deographics','http://deographics.com/',""); } }
6、设置首页
//setHomepage functionsetHomepage(){ if(document.all){ document.body.style.behavior='url(#default#homepage)'; document.body.setHomePage('http://deographics.com/'); }elseif(window.sidebar){ if(window.netscape){ try{ netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); }catch(e){ alert("Theoperationwasrefusedbybrowser,ifyouwanttoenablethisfeature,pleaseenterintheaddresscolumn'about:config',then,change'signed.applets.codebase_principal_support'to'true'"); } } varprefs=Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch); prefs.setCharPref('browser.startup.homepage','http://deographics.com/'); } }
7、Jquery+Ajax判断用户是否存在
//检测用户名是否存在 $("#username").blur(function(){ varname=$(this).val();vartable=$(this).attr('title'); if(name!=''){ vardataString='username='+name+'&table='+table; $.post("operate.php",dataString,function(data){//alert(data); if(data==0){ alert('Thisusernamealreadyexist!');$(this).val('').focus();returnfalse; } }); } });
或者
vardatastring='id='+$id+'&pos='+$pos; $.ajax({ type:"POST", url:url, data:dataString, beforeSend:function(){}, error:function(){alert('SendError!');}, success:function(data){ //dosomething } });
8、判断email格式是否正确
functionchekemail(temail){ varpattern=/^[\w]{1}[\w\.\-_]*@[\w]{1}[\w\-_\.]*\.[\w]{2,4}$/i; if(pattern.test(temail)){returntrue;}else{returnfalse;} }
9、综合判断用户名(长度,英文字段等)
//实例 varusername=$('#username'); varbackValue=VerifyInput('username'); if(backValue=='length'){ alert("Usernameismakeupof3-15characters!"); username.focus(); returnfalse; }elseif(backValue=='first'){ alert("theFirstcharactermustbeletterornumber!"); username.focus(); returnfalse; }elseif(backValue=='back'){ alert("Usernameonlycontainsletternumberor'_'"); username.focus(); returnfalse; } //判断 functionVerifyInput(user){ varstrUserID=$('#'+user).val(); if(strUserID.length<3||strUserID.length>15){ return'length'; }else{ for(nIndex=0;nIndex<strUserID.length;nIndex++){ cCheck=strUserID.charAt(nIndex); if(nIndex==0&&(cCheck=='-'||cCheck=='_')){ return'first'; } if(!(IsDigit(cCheck)||IsAlpha(cCheck)||cCheck=='-'||cCheck=='_')){ return'back'; } } } } functionIsDigit(cCheck){return(('0'<=cCheck)&&(cCheck<='9'));} functionIsAlpha(cCheck){return((('a'<=cCheck)&&(cCheck<='z'))||(('A'<=cCheck)&&(cCheck<='Z')))}
10、新闻滚动
<styletype="text/css"> ul,li{margin:0;padding:0;font-size:12px;color:#999;} ul{height:100px;overflow:hidden;} ulli{line-height:20px;height:20px;} </style> <ulid="news"> <li>NewYorkwebdesignInc.1</li> <li>Yoursitewillbestructured2</li> <li>hatwillcommunicatethe3</li> <li>hatwillcommunicatethe4</li> <li>hatwillcommunicatethe5</li> <li>hatwillcommunicatethe6</li> <li>hatwillcommunicatethe7</li> <li>hatwillcommunicatethe8</li> <li>hatwillcommunicatethe9</li> <li>NewYorkwebdesignInc.10</li> <li>NewYorkwebdesignInc.11</li> <li>NewYorkwebdesignInc.12</li> <li>NewYorkwebdesignInc.13</li> <li>NewYorkwebdesignInc.14</li> </ul>
Java代码
//用法:四个参数分别是:操作对象,停留时间,相对速度(越小越快),每次滚动多少(最好和Li的Line-height一致)。 scroll('news',3000,1,20); functionscroll(element,delay,speed,lineHeight){ varnumpergroup=5; varslideBox=(typeofelement=='string')?document.getElementById(element):element; vardelay=delay||1000; varspeed=speed||20; varlineHeight=lineHeight||20; vartid=null,pause=false; varliLength=slideBox.getElementsByTagName('li').length; varlack=numpergroup-liLength%numpergroup; for(i=0;i<lack;i++){ slideBox.appendChild(document.createElement("li")); } varstart=function(){ tid=setInterval(slide,speed); } varslide=function(){ if(pause)return; slideBox.scrollTop+=2; if(slideBox.scrollTop%lineHeight==0){ clearInterval(tid); for(i=0;i<numpergroup;i++){ slideBox.appendChild(slideBox.getElementsByTagName('li')[0]); } slideBox.scrollTop=0; setTimeout(start,delay); } } slideBox.onmouseover=function(){pause=true;} slideBox.onmouseout=function(){pause=false;} setTimeout(start,delay); }
11、只允许输入正整数(shoppingcart使用)
<scriptlanguage="JavaScript"type="text/javascript"> functioncheckNum(obj){ varre=/^[1-9]\d*$/; if(!re.test(obj.value)){ alert("只允许正整数!"); obj.value=''; obj.focus(); returnfalse; } } </script> <inputname="rate"type="text"onkeyup="checkNum(this)"/>
或正数
<scriptlanguage="JavaScript"type="text/javascript"> functionclearNoNum(obj) { //先把非数字的都替换掉,除了数字和. objobj.value=obj.value.replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. objobj.value=obj.value.replace(/^\./g,""); //保证只有出现一个.而没有多个. objobj.value=obj.value.replace(/\.{2,}/g,"."); //保证.只出现一次,而不能出现两次以上 objobj.value=obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); } </script>
只能输入数字和小数点的文本框:<inputid="input1"onkeyup="clearNoNum(this)">
12、转换字符串为数字
/* js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(NotaNumber)。 */ parseInt("1234blue");//returns1234 parseInt("0xA");//returns10 parseInt("22.5");//returns22 parseInt("blue");//returnsNaN parseFloat("1234blue");//returns1234.0 parseFloat("0xA");//returnsNaN parseFloat("22.5");//returns22.5 parseFloat("22.34.5");//returns22.34 parseFloat("0908");//returns908 parseFloat("blue");//returnsNaN /* 还可使用强制类型转换(typecasting)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类型的。 Boolean(value)——把给定的值转换成Boolean型; Number(value)——把给定的值转换成数字(可以是整数或浮点数); String(value)——把给定的值转换成字符串。 */ Boolean("");//false–emptystring Boolean("hi");//true–non-emptystring Boolean(100);//true–non-zeronumber Boolean(null);//false-null Boolean(0);//false-zero Boolean(newObject());//true–object Number(false)0 Number(true)1 Number(undefined)NaN Number(null)0 Number("5.5")5.5 Number("56")56 Number("5.6.7")NaN Number(newObject())NaN Number(100)100 vars1=String(null);//"null" varoNull=null; vars2=oNull.toString();//won'twork,causesanerror
13、判断文件格式(获得文件后缀)
//用法:get_ext(this,'img'); functionget_ext(name){ varpos=name.lastIndexOf('.'); varextname=name.substring(pos,name.length)//like:str.split('.') varlastname=extname.toLowerCase(); if(lastname!='.jpg'&&lastname!='.gif'&&lastname!='.png'&&lastname!='.bmp'){ returnlastname; }else{ returnname; } } }
14、截取字符串
//简单型 <scripttype="text/javascript"> varstr="Helloworld!" document.write(str.substr(3,7)) </script> //结果是loworl //复杂型(中文或者中英文混合截取) <script> //截取字符串包含中文处理 //(串,长度,增加...) functionsubString(str,len,hasDot) { varnewLength=0; varnewStr=""; varchineseRegex=/[^\x00-\xff]/g; varsingleChar=""; varstrLength=str.replace(chineseRegex,"**").length; for(vari=0;i<strLength;i++) { singleChar=str.charAt(i).toString(); if(singleChar.match(chineseRegex)!=null) { newLength+=2; } else { newLength++; } if(newLength>len) { break; } newStr+=singleChar; } if(hasDot&&strLength>len) { newStr+="..."; } returnnewStr; } document.write(subString("你好,thisisatest!",10,1));//参数依次为字符串,截取的长度和是否显示省略号 </script>
15、分割字符串
<scripttype="text/javascript"> varstr='this_is_a_test_!'; vararr=str.split('_'); document.write(arr+"<br/>");//罗列全部 document.write(arr[0]+"<br/>");//取单项 </script>
以上就是小编为大家整理的常用的javascript函数,希望对大家的学习有所帮助,之后还有更多javascript常用函数分享给大家,继续关注。