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.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常用函数分享给大家，继续关注。