javascript常用函数(1)


Posted in Javascript onNovember 04, 2015

文章主要内容列表:

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常用函数分享给大家,继续关注。

Javascript 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
js实现每日签到功能
Nov 29 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 #Javascript
jQuery多条件筛选如何实现
Nov 04 #Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 #Javascript
js数组去重的5种算法实现
Nov 04 #Javascript
解决js图片加载时出现404的问题
Nov 30 #Javascript
jquery实现的点击翻书效果代码
Nov 04 #Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 #Javascript
You might like
PHP4中session登录页面的应用
2008/07/25 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
在PHP中使用redis
2013/11/04 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
jQuery选择器全面总结
2014/01/06 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
详解python UDP 编程
2020/08/24 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
Android面试宝典
2013/08/06 面试题
2014年端午节活动方案
2014/03/11 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
单位授权委托书范本
2014/09/26 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
python实现简单的聊天小程序
2021/07/07 Python
SQL Server 中的事务介绍
2022/05/20 SQL Server
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技