javascript常用函数（1）

2024-03-26 02:38:05 44

文章主要内容列表：

1、调整图片大小，不走形（FFIE兼容）/剪切图片（overflow:hidden）
2、控制textarea区域文字数量
3、点击显示新窗口
4、 input框自动随内容自动变长
5、添加收藏夹
6、设置首页
7、 Jquery+Ajax判断用户是否存在
8、判断email格式是否正确
9、综合判断用户名（长度，英文字段等）
10、新闻滚动
11、只允许输入正整数（shoppingcart使用）或者正数（正整数和正小数）
12、转换字符串为数字
13、判断文件格式（获得文件后缀）
14、截取字符串
15、分割字符串

主要内容：
1、调整图片大小，不走形（FFIE兼容）

//用法<imgsrc="this_image_path.jpg"onload="DrawImage(this,450,450);"/>
functionDrawImage(ImgD,FitWidth,FitHeight){
varimage=newImage();
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进行剪切：

functionclipImage(o,w,h){
varimg=newImage();
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;
}
}
}
}

实例：

<styletype="text/css">
ul{list-style:none;}
ulli{float:left;padding:1px;border:#ccc1pxsolid;width:120px;height:120px;overflow:hidden;text-align:center;over-flow:hidden;}
</style>
<ul>
<li><imgsrc="1.jpg"onload="DrawImage(this,120,120);"/></li>
<li><imgsrc="2.jpg"onload="clipImage(this,120,120);"/></li>
</ul>

2、控制textarea区域文字数量

<script>
/**
*Calculatehowmanycharactersremaininatextarea(jQuery)
*@paramstringtextarea
*@paramintmaxLength
*@paramstringdiv
*/
functioncharsRemain(textarea,maxLength,div){
varcurrentLength=$(textarea).val().length;

varcharsLeft=maxLength-currentLength;
if(charsLeft<0){charsLeft=0;}

$("#"+div+"_charsRemain").html(charsLeft);

if(currentLength>maxLength){
varfullText=$(textarea).val().substring(0,maxLength);
$(textarea).val(fullText);
}
}

/**
*Calculatehowmanycharactersremaininatextarea(javascript)
*@paramstringtextarea
*@paramintmaxLength
*@paramstringdiv
*/
functioncharsRemain(textarea,maxLength,div){
varcurrentLength=textarea.value.length;

varcharsLeft=maxLength-currentLength;
if(charsLeft<0){charsLeft=0;}

document.getElementById(div+"_charsRemain").innerHTML=charsLeft;

if(currentLength>maxLength){
varfullText=textarea.value.substring(0,maxLength);
textarea.value=fullText;
}
}
</script>

<textarearows="5"cols="15"onkeyup="charsRemain(this,250,'textarea');"></textarea>

<spanid="textarea_charsRemain">250</span>charactersremaining

3、点击显示新窗口

//弹窗
functiong_OpenWindow(pageURL,innerWidth,innerHeight)
{
varScreenWidth=screen.availWidth
varScreenHeight=screen.availHeight
varStartX=(ScreenWidth-innerWidth)/2
varStartY=(ScreenHeight-innerHeight)/2
varwins=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代码：

<scriptlanguage="JavaScript">
//自动弹出窗口
varwhatsNew=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>thisisatest');
whatsNew.document.write('<p>deosaddress');
whatsNew.document.write('<palign="right">'+'<ahref="javascript:self.close()">Close</a>');
whatsNew.document.close();
</script>

不幸的是，很多浏览器会屏蔽弹出窗口，你需要手动允许后方可看到！下面是强制弹出窗口，原理就是创建一个form，通过post打开。

<scriptlanguage="javascript">
functionForceWindow(){
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]);//XMLDOM:insertBefore()方法可在已有的子节点前插入一个新的子节点。insertBefore(newchild,refchild)
}

ForceWindow.prototype.pop=function(sUrl){
this.f.action=sUrl;
this.f.submit();
}

window.force=newForceWindow();
</script>

<bodyonLoad="window.force.pop('http://deographics.com/')">
<div>
thisisatest!wewillopenthedeographics'swebsite~~
</div>
</body>

当然还有更好的办法就是

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

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

//inputautolength
//<inputname="words"size="2"maxlength="100"onkeyup="checkLength(this)"/><spanid="char">0</span>

functioncheckLength(which){
varmaxchar=100;
//varoTextCount=document.getElementById("char");
iCount=which.value.replace(/[^\u0000-\u00ff]/g,"aa").length;
if(iCount<=maxchar){
//oTextCount.innerHTML="<fontcolor=#FF0000>"+iCount+"</font>";
which.style.border='1pxdotted#FF0000';
which.size=iCount+2;
}else{
alert('Pleaseinputletterlessthan'+maxchar);
}
}

5、添加收藏夹

//addfavorite
functionaddfavorite(){
if(document.all){
window.external.addFavorite('http://deographics.com/','deographics');
}elseif(window.sidebar){
window.sidebar.addPanel('deographics','http://deographics.com/',"");
}
}

6、设置首页

//setHomepage
functionsetHomepage(){
if(document.all){
document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://deographics.com/');
}elseif(window.sidebar){
if(window.netscape){
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}catch(e){
alert("Theoperationwasrefusedbybrowser,ifyouwanttoenablethisfeature,pleaseenterintheaddresscolumn'about:config',then,change'signed.applets.codebase_principal_support'to'true'");
}
}
varprefs=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(){
varname=$(this).val();vartable=$(this).attr('title');
if(name!=''){
vardataString='username='+name+'&table='+table;
$.post("operate.php",dataString,function(data){//alert(data);
if(data==0){
alert('Thisusernamealreadyexist!');$(this).val('').focus();returnfalse;
}
});
}
});

或者

vardatastring='id='+$id+'&pos='+$pos;
$.ajax({
type:"POST",
url:url,
data:dataString,
beforeSend:function(){},
error:function(){alert('SendError!');},
success:function(data){
//dosomething
}
});

8、判断email格式是否正确

functionchekemail(temail){
varpattern=/^[\w]{1}[\w\.\-_]*@[\w]{1}[\w\-_\.]*\.[\w]{2,4}$/i;
if(pattern.test(temail)){returntrue;}else{returnfalse;}
}

9、综合判断用户名（长度，英文字段等）

//实例
varusername=$('#username');
varbackValue=VerifyInput('username');

if(backValue=='length'){
alert("Usernameismakeupof3-15characters!");
username.focus();
returnfalse;
}elseif(backValue=='first'){
alert("theFirstcharactermustbeletterornumber!");
username.focus();
returnfalse;
}elseif(backValue=='back'){
alert("Usernameonlycontainsletternumberor'_'");
username.focus();
returnfalse;
}
//判断
functionVerifyInput(user){
varstrUserID=$('#'+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';
}
}
}
}
functionIsDigit(cCheck){return(('0'<=cCheck)&&(cCheck<='9'));}
functionIsAlpha(cCheck){return((('a'<=cCheck)&&(cCheck<='z'))||(('A'<=cCheck)&&(cCheck<='Z')))}

10、新闻滚动

<styletype="text/css">
ul,li{margin:0;padding:0;font-size:12px;color:#999;}
ul{height:100px;overflow:hidden;}
ulli{line-height:20px;height:20px;}
</style>

<ulid="news">
<li>NewYorkwebdesignInc.1</li>
<li>Yoursitewillbestructured2</li>
<li>hatwillcommunicatethe3</li>

<li>hatwillcommunicatethe4</li>
<li>hatwillcommunicatethe5</li>
<li>hatwillcommunicatethe6</li>
<li>hatwillcommunicatethe7</li>
<li>hatwillcommunicatethe8</li>
<li>hatwillcommunicatethe9</li>

<li>NewYorkwebdesignInc.10</li>
<li>NewYorkwebdesignInc.11</li>
<li>NewYorkwebdesignInc.12</li>
<li>NewYorkwebdesignInc.13</li>
<li>NewYorkwebdesignInc.14</li>
</ul>

Java代码

//用法:四个参数分别是:操作对象，停留时间，相对速度（越小越快）,每次滚动多少(最好和Li的Line-height一致)。

scroll('news',3000,1,20);

functionscroll(element,delay,speed,lineHeight){
varnumpergroup=5;
varslideBox=(typeofelement=='string')?document.getElementById(element):element;
vardelay=delay||1000;
varspeed=speed||20;
varlineHeight=lineHeight||20;
vartid=null,pause=false;
varliLength=slideBox.getElementsByTagName('li').length;
varlack=numpergroup-liLength%numpergroup;
for(i=0;i<lack;i++){
slideBox.appendChild(document.createElement("li"));
}
varstart=function(){
tid=setInterval(slide,speed);
}
varslide=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、只允许输入正整数（shoppingcart使用）

<scriptlanguage="JavaScript"type="text/javascript">
functioncheckNum(obj){
varre=/^[1-9]\d*$/;
if(!re.test(obj.value)){
alert("只允许正整数!");
obj.value='';
obj.focus();
returnfalse;
}
}
</script>

<inputname="rate"type="text"onkeyup="checkNum(this)"/>

或正数

<scriptlanguage="JavaScript"type="text/javascript">
functionclearNoNum(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>

只能输入数字和小数点的文本框：<inputid="input1"onkeyup="clearNoNum(this)">
12、转换字符串为数字

/*
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(NotaNumber)。
*/

parseInt("1234blue");//returns1234
parseInt("0xA");//returns10
parseInt("22.5");//returns22
parseInt("blue");//returnsNaN

parseFloat("1234blue");//returns1234.0
parseFloat("0xA");//returnsNaN
parseFloat("22.5");//returns22.5
parseFloat("22.34.5");//returns22.34
parseFloat("0908");//returns908
parseFloat("blue");//returnsNaN

/*
还可使用强制类型转换（typecasting）处理转换值的类型。使用强制类型转换可以访问特定的值，即使它是另一种类型的。
Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。
*/

Boolean("");//false–emptystring
Boolean("hi");//true–non-emptystring
Boolean(100);//true–non-zeronumber
Boolean(null);//false-null
Boolean(0);//false-zero
Boolean(newObject());//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(newObject())NaN
Number(100)100

vars1=String(null);//"null"
varoNull=null;
vars2=oNull.toString();//won'twork,causesanerror

13、判断文件格式（获得文件后缀）

//用法：get_ext(this,'img');

functionget_ext(name){
varpos=name.lastIndexOf('.');
varextname=name.substring(pos,name.length)//like:str.split('.')
varlastname=extname.toLowerCase();

if(lastname!='.jpg'&&lastname!='.gif'&&lastname!='.png'&&lastname!='.bmp'){
returnlastname;
}else{
returnname;
}
}
}

14、截取字符串

//简单型

<scripttype="text/javascript">

varstr="Helloworld!"
document.write(str.substr(3,7))

</script>

//结果是loworl


//复杂型（中文或者中英文混合截取）

<script>
//截取字符串包含中文处理
//(串,长度,增加...)
functionsubString(str,len,hasDot)
{
varnewLength=0;
varnewStr="";
varchineseRegex=/[^\x00-\xff]/g;
varsingleChar="";
varstrLength=str.replace(chineseRegex,"**").length;
for(vari=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+="...";
}
returnnewStr;
}

document.write(subString("你好，thisisatest!",10,1));//参数依次为字符串，截取的长度和是否显示省略号
</script>

15、分割字符串

<scripttype="text/javascript">

varstr='this_is_a_test_!';
vararr=str.split('_');

document.write(arr+"<br/>");//罗列全部
document.write(arr[0]+"<br/>");//取单项

</script>

以上就是小编为大家整理的常用的javascript函数，希望对大家的学习有所帮助，之后还有更多javascript常用函数分享给大家，继续关注。

javascript常用函数（1）

热门推荐

随机推荐