javascript常用函數（1）_javascript技巧

文章主要內容清單：

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="/static/imghwm/default1.png"  data-src="this_image_path.jpg"  class="lazy" onload="DrawImage(this,450,450);" / alt="javascript常用函數（1）_javascript技巧" > 
 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="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy" onload="DrawImage(this,120,120);" / alt="javascript常用函數（1）_javascript技巧" ></li> 
 <li><img  src="/static/imghwm/default1.png"  data-src="2.jpg"  class="lazy" onload="clipImage(this,120,120);" / alt="javascript常用函數（1）_javascript技巧" ></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> 

只能輸入數字和小數點的文字方塊：  
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常用函數分享給大家，繼續關注。