文章主要内容列表：
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.availWidth var ScreenHeight = screen.availHeight var StartX = (ScreenWidth - innerWidth) / 2 var StartY = (ScreenHeight - innerHeight) / 2 var 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、添加收藏夹
// addfavorite function addfavorite(){ if (document.all){ window.external.addFavorite('http://deographics.com/','deographics'); }else if (window.sidebar){ window.sidebar.addPanel('deographics', 'http://deographics.com/', ""); } }
6、设置首页
// setHomepage function 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 NaN parseFloat("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 – 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(new Object()) NaN Number(100) 100 var 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常用函数分享给大家，继续关注。
【javascript常用函数（1）】相关文章：