javascript常用函数（1）

文章主要内容列表：
1、调整图片大小，不走形（FF IE 兼容）/ 剪切图片（overflow:hidden）
2、控制textarea区域文字数量
3、点击显示新窗口
4、 input框自动随内容自动变长
5、添加收藏夹
6、设置首页
7、 Jquery + Ajax 判断用户是否存在
8、判断email格式是否正确
9、综合判断用户名（长度，英文字段等）
10、新闻滚动
11、只允许输入正整数（shopping cart 使用）或者正数（正整数和正小数）
12、转换字符串为数字
13、判断文件格式（获得文件后缀）
14、截取字符串
15、分割字符串

主要内容：
1、调整图片大小，不走形（FF IE 兼容）

// 用法 <img src="this_image_path.jpg" onload="DrawImage（this,450,450）;" />function DrawImage（ImgD,FitWidth,FitHeight）{var image=new Image（）;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进行剪切：

function clipImage（o, w, h）{var img = new Image（）;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; } }} }

实例：

<style type="text/css">ul{list-style:none;}ul li{float:left;padding:1px;border:#ccc 1px solid;width:120px;height:120px;overflow:hidden;text-align:center;over-flow:hidden;} </style> <ul><li><img src="1.jpg" onload="DrawImage（this,120,120）;" /></li><li><img src="2.jpg" onload="clipImage（this,120,120）;" /></li> </ul>

2、控制textarea区域文字数量

<script> /*** Calculate how many characters remain in a textarea （jQuery）* @param string textarea* @param int maxLength* @param string div*/ function charsRemain（textarea, maxLength, div） {var currentLength = $（textarea）.val（）.length; var charsLeft = maxLength - currentLength;if （charsLeft < 0） { charsLeft = 0; } $（"#"+ div +"_charsRemain"）.html（charsLeft）; if （currentLength > maxLength） {var fullText = $（textarea）.val（）.substring（0, maxLength）;$（textarea）.val（fullText）;} }/*** Calculate how many characters remain in a textarea （javascript）* @param string textarea* @param int maxLength* @param string div*/ function charsRemain（textarea, maxLength, div） {var currentLength = textarea.value.length; var charsLeft = maxLength - currentLength;if （charsLeft < 0） { charsLeft = 0; } document.getElementById（div +"_charsRemain"）.innerHTML = charsLeft; if （currentLength > maxLength） {var fullText = textarea.value.substring（0, maxLength）;textarea.value = fullText;} } </script><textarea rows="5" cols="15" onkeyup="charsRemain（this, 250, "textarea"）;"></textarea><span id="textarea_charsRemain">250</span> characters remaining

3、点击显示新窗口

//弹窗 function g_OpenWindow（pageURL, innerWidth, innerHeight） {var ScreenWidth = screen.availWidthvar ScreenHeight = screen.availHeightvar StartX = （ScreenWidth - innerWidth） / 2var StartY = （ScreenHeight - innerHeight） / 2var wins = 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代码：

<script language="JavaScript">// 自动弹出窗口var whatsNew = 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>this is a test"）;whatsNew.document.write（"<p>deos address"）;whatsNew.document.write（"<p align="right">" + "<a href="javascript:self.close（）">Close</a>"）;whatsNew.document.close（）; </script>

不幸的是，很多浏览器会屏蔽弹出窗口，你需要手动允许后方可看到！下面是强制弹出窗口，原理就是创建一个form，通过post打开。

<script language="javascript">function ForceWindow （）{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]）; //XML DOM : insertBefore（） 方法可在已有的子节点前插入一个新的子节点。 insertBefore（newchild,refchild）} ForceWindow.prototype.pop = function （sUrl）{this.f.action = sUrl;this.f.submit（）;} window.force = new ForceWindow（）; </script><body onLoad="window.force.pop（"http://deographics.com/"）"><div> this is a test ！ we will open the deographics"s website~~</div> </body>

当然还有更好的办法就是

<script>function openWin（）{window.showModalDialog（url,window, "help:no;scroll:no;resizable:no;status:0;dialogWidth:420px;dialogHeight:200px;center:yes"）;} </script>

4、input框自动随内容自动变长

// input auto length// <input name="words" size="2" maxlength="100" onkeyup="checkLength（this）"/><span id="char">0</span> function checkLength（which） {var maxchar=100;//var oTextCount = document.getElementById（"char"）;iCount = which.value.replace（/[^u0000-u00ff]/g,"aa"）.length;if（iCount<=maxchar）{ //oTextCount.innerHTML = "<font color=#FF0000>"+ iCount+"</font>"; which.style.border = "1px dotted #FF0000"; which.size=iCount+2;}else{ alert（"Please input letter less than "+ maxchar）;}}

5、添加收藏夹

// addfavoritefunction addfavorite（）{if （document.all）{ window.external.addFavorite（"http://deographics.com/","deographics"）;}else if （window.sidebar）{ window.sidebar.addPanel（"deographics", "http://deographics.com/", ""）;}}

6、设置首页

// setHomepagefunction setHomepage（）{if（document.all）{ document.body.style.behavior = "url（#default#homepage）"; document.body.setHomePage（"http://deographics.com/"）;}else if（window.sidebar）{ if（window.netscape）{ try{netscape.security.PrivilegeManager.enablePrivilege（"UniversalXPConnect"）; }catch（e）{alert（" The operation was refused by browser,if you want to enable this feature, please enter in the address column "about:config", then, change "signed.applets.codebase_principal_support" to "true" "）; } } var prefs = 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（）{var name = $（this）.val（）; var table = $（this）.attr（"title"）;if（name！=""）{var dataString = "username="+ name + "&table=" + table;$.post（"operate.php",dataString,function（data）{ //alert（data）; if（data==0）{ alert（"This username already exist ！"）; $（this）.val（""）.focus（）; return false; }}）;} }）;

或者

var datastring = "id=" + $id + "&pos=" + $pos; $.ajax（{type: "POST",url: url,data: dataString,beforeSend: function（）{},error: function（）{alert（"Send Error ！"）;},success: function（data） {// do something}}）;

8、判断email格式是否正确

function chekemail（temail）{var pattern = /^[w]{1}[w.-_]*@[w]{1}[w-_.]*.[w]{2,4}$/i;if（pattern.test（temail））{return true;}else{return false;} }

9、综合判断用户名（长度，英文字段等）

// 实例var username = $（"#username"）;var backValue = VerifyInput（"username"）; if（backValue == "length"）{alert（"Username is make up of 3 - 15 characters！"）; username.focus（）; return false;}else if（backValue == "first"）{alert（"the First character must be letter or number ！"）; username.focus（）; return false;}else if（backValue == "back"）{alert（"Username only contains letter number or "_" "）; username.focus（）; return false;} // 判断function VerifyInput（user）{var strUserID = $（"#"+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"; } }}}function IsDigit（cCheck） {return （（"0"<=cCheck） && （cCheck<="9"））;}function IsAlpha（cCheck） {return （（（"a"<=cCheck） && （cCheck<="z"）） || （（"A"<=cCheck） && （cCheck<="Z"）））}

10、新闻滚动

<style type="text/css"> ul,li{margin:0;padding:0;font-size:12px;color:#999;} ul{height:100px;overflow:hidden;} ul li{line-height:20px;height:20px;} </style><ul id="news"><li>New York web design Inc.1</li><li>Your site will be structured 2</li><li>hat will communicate the 3</li> <li>hat will communicate the 4</li><li>hat will communicate the 5</li><li>hat will communicate the 6</li><li>hat will communicate the 7</li><li>hat will communicate the 8</li><li>hat will communicate the 9</li> <li>New York web design Inc. 10</li><li>New York web design Inc.11</li><li>New York web design Inc. 12</li><li>New York web design Inc. 13</li><li>New York web design Inc. 14</li> </ul>

Java代码

// 用法 : 四个参数分别是:操作对象， 停留时间，相对速度（越小越快）,每次滚动多少（最好和Li的Line-height一致）。scroll（"news", 3000, 1, 20 ）;function scroll（element, delay, speed, lineHeight） {var numpergroup = 5;var slideBox = （typeof element == "string"）?document.getElementById（element）:element;var delay = delay||1000;var speed=speed||20;var lineHeight = lineHeight||20;var tid = null, pause = false;var liLength = slideBox.getElementsByTagName（"li"）.length;var lack = numpergroup-liLength%numpergroup;for（i=0;i<lack;i++）{slideBox.appendChild（document.createElement（"li"））;}var start = function（） { tid=setInterval（slide, speed）;}var slide = 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、只允许输入正整数（shopping cart 使用）

<script language="JavaScript" type="text/javascript"> function checkNum（obj）{var re = /^[1-9]d*$/;if （！re.test（obj.value））{alert（"只允许正整数！"）;obj.value="";obj.focus（）;return false;} } </script><input name="rate" type="text"onkeyup="checkNum（this）" />

或正数

<script language="JavaScript" type="text/javascript">function clearNoNum（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>

只能输入数字和小数点的文本框：<input id="input1" onkeyup="clearNoNum（this）">
12、转换字符串为数字

/* js提供了parseInt（）和parseFloat（）两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN（Not a Number）。 */parseInt（"1234blue"）; //returns 1234 parseInt（"0xA"）; //returns 10 parseInt（"22.5"）; //returns 22 parseInt（"blue"）; //returns NaNparseFloat（"1234blue"）; //returns 1234.0 parseFloat（"0xA"）; //returns NaN parseFloat（"22.5"）; //returns 22.5 parseFloat（"22.34.5"）; //returns 22.34 parseFloat（"0908"）; //returns 908 parseFloat（"blue"）; //returns NaN/* 还可使用强制类型转换（type casting）处理转换值的类型。使用强制类型转换可以访问特定的值，即使它是另一种类型的。 Boolean（value）——把给定的值转换成Boolean型； Number（value）——把给定的值转换成数字（可以是整数或浮点数）； String（value）——把给定的值转换成字符串。 */Boolean（""）; //false – empty string Boolean（"hi"）; //true – non-empty string Boolean（100）; //true – non-zero number Boolean（null）; //false - null Boolean（0）; //false - zero Boolean（new Object（））; //true – objectNumber（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（new Object（）） NaN Number（100） 100var s1 = String（null）; //"null" var oNull = null; var s2 = oNull.toString（）; //won"t work, causes an error

13、判断文件格式（获得文件后缀）

// 用法：get_ext（this,"img"）;function get_ext（name）{var pos = name.lastIndexOf（"."）;var extname = name.substring（pos,name.length） // like: str.split（"."）var lastname = extname.toLowerCase（）; if （lastname ！=".jpg" && lastname ！=".gif" && lastname ！=".png" && lastname ！=".bmp"）{ return lastname;}else{ return name;}} }

14、截取字符串

// 简单型<script type="text/javascript">var str="Hello world！" document.write（str.substr（3,7））</script>// 结果是 lo worl // 复杂型（中文或者中英文混合截取）<script> //截取字符串 包含中文处理 //（串,长度,增加...） function subString（str, len, hasDot） {var newLength = 0;var newStr = "";var chineseRegex = /[^x00-xff]/g;var singleChar = "";var strLength = str.replace（chineseRegex,"**"）.length;for（var i = 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 += "...";}return newStr; }document.write（subString（"你好，this is a test！",10,1））; // 参数依次为 字符串， 截取的长度 和 是否显示省略号 </script>

15、分割字符串

<script type="text/javascript">var str = "this_is_a_test_！"; var arr = str.split（"_"）;document.write（arr + "<br />"）; // 罗列全部 document.write（arr[0] + "<br />"）; // 取单项</script>

以上就是小编为大家整理的常用的javascript函数，希望对大家的学习有所帮助，之后还有更多javascript常用函数分享给大家，继续关注。