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

天梯梦

浏览: 13730852 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

Javascript /Jquery / Bootstrap / Web

JavaScript jQuery Ajax IE EXT

常用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" 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();
}

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

// 用法 : 四个参数分别是:操作对象， 停留时间，相对速度（越小越快）,每次滚动多少(最好和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)
	{
		//先把非数字的都替换掉，除了数字和.
		obj.value = obj.value.replace(/[^\d.]/g,"");
		//必须保证第一个为数字而不是.
		obj.value = obj.value.replace(/^\./g,"");
		//保证只有出现一个.而没有多个.
		obj.value = obj.value.replace(/\.{2,}/g,".");
		//保证.只出现一次，而不能出现两次以上
		obj.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>

转帖注明： http://justcoding.iteye.com/blog/548591

2
顶

0
踩

分享到：

php 日期时间运算的小结(计算当前时间之后 ... | JavaScript 字符串转换数字

2009-12-15 08:05
浏览 2917
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

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

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

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

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

评论

发表评论

相关推荐

使用jQuery和Pure.CSS创建一个可编辑的表格

2016十大优秀jQuery插件推荐

jQuery .tmpl() 用法

jQuery：从零开始，DIY一个jQuery（2）

jQuery：从零开始，DIY一个jQuery（1）

Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar

jQuery: 操作select option方法集合

jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()

jQuery: 选择器(DOM,name,属性,元素)

jQuery: 合并表格中相同文本的相邻单元格

Bootstrap 3: 使用注意box-sizing细节及解决方法

域名详解

Bootstrap 3: 图标转换事件 Change icons when toggle

Bootstrap 3: 图标转换事件 Change icons when toggle

jQuery：无限循环两个或者多个事件 click / toggle between two functions

javascript 中面向对象实现 如何继承

javascript 中的面向对象实现 如何封装

AngularJS jQuery 共存法则

七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX

七步从Angular.JS菜鸟到专家（2）：Scopes

最近访客更多访客>>

javascript 中面向对象实现如何继承

javascript 中的面向对象实现如何封装