Fungsi yang biasa digunakan dalam kemahiran javascript (1)_javascript

Senarai kandungan utama artikel:

1. Laraskan saiz imej tanpa kehilangan bentuk (FF IE serasi)/potong imej (limpahan:tersembunyi)
2. Kawal bilangan teks dalam kawasan teks
3. Klik untuk memaparkan tetingkap baharu
4. Kotak input secara automatik membesar dengan kandungan
5. Tambah kegemaran
6. Sediakan halaman utama
7. Jquery Ajax menentukan sama ada pengguna itu wujud
8. Tentukan sama ada format e-mel adalah betul
9. Pertimbangan komprehensif nama pengguna (panjang, medan Bahasa Inggeris, dll.)
10. Tatal berita
11. Hanya integer positif (digunakan oleh troli beli-belah) atau nombor positif (integer positif dan perpuluhan positif) dibenarkan
12. Tukar rentetan kepada nombor
13. Tentukan format fail (dapatkan akhiran fail)
14. Rentetan memintas
15. Pisah rentetan

Kandungan utama:
1. Laraskan saiz imej tanpa kehilangan bentuk (FF IE serasi)

// 用法 <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; 
  } 
  } 
 } 
 } 

Potong melalui limpahan: tersembunyi:

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; 
  }  
 } 
 } 
} 

Contoh:

<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. Kawal jumlah teks dalam kawasan teks

<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 Klik untuk memaparkan tetingkap baharu

//弹窗 
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(); 
} 

Kod 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> 

Malangnya, banyak penyemak imbas menyekat tetingkap timbul dan anda perlu membenarkannya secara manual sebelum anda dapat melihatnya! Berikut ialah tetingkap pop timbul paksa Prinsipnya adalah untuk mencipta borang dan membukanya melalui pos.

<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> 

Sudah tentu ada cara yang lebih baik

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

4. Kotak input secara automatik membesar dengan kandungan

// 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. Tambah kegemaran

// 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. Tetapkan halaman utama

// 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 menentukan sama ada pengguna itu wujud

// 检测 用户名是否存在 
$("#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; 
  } 
 }); 
 } 
}); 

atau

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 Tentukan sama ada format e-mel adalah betul

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. Penilaian menyeluruh nama pengguna (panjang, medan Bahasa Inggeris, dll.)

// 实例 
 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. Menatal berita

<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> 

Kod 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. Hanya integer positif dibenarkan (untuk kegunaan troli beli-belah)

<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)" /> 

atau nombor positif

<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> 

Kotak teks yang hanya boleh memasukkan nombor dan titik perpuluhan:
12. Tukar rentetan kepada nombor

/* 
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. Tentukan format fail (dapatkan akhiran fail)

// 用法：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 Memintas rentetan

// 简单型 
 
<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. Pisah rentetan

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

Di atas adalah fungsi javascript yang biasa digunakan yang disusun oleh editor untuk semua orang Saya harap ia akan membantu pembelajaran semua orang Akan ada lebih banyak fungsi javascript yang akan dikongsi dengan anda pada masa akan datang.