常用JavaScript函数 1 - 15 （自我总结）

转载

zhangying2001 2023-05-12 10:08:49

文章标签 JavaScript jQuery Ajax IE EXT 文章分类 HarmonyOS 后端开发

常用JavaScript函数 16 - 30（自我总结）

常用JavaScript函数 31- 46 （自我总结）

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" οnlοad="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" οnlοad="DrawImage(this,120,120);" /></li>
	<li><img src="2.jpg" οnlοad="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" οnkeyup="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();
}

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

更多请看：javascript基础入门

4、input框自动随内容自动变长

// input auto length
	// <input name="words" size="2" maxlength="100" οnkeyup="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);
	   }
	}