javascript常用函数（1）

前端技术 2023/09/06 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=\"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常用函数分享给大家，继续关注。

本文地址：https://www.stayed.cn/item/16620

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)