javascript常用函数(1)

前端之家收集整理的这篇文章主要介绍了javascript常用函数(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

文章主要内容列表:

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 兼容)

用法 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进行剪切:

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

2、控制textarea区域文字数量

/** * 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,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;
}
}

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

<span id="textarea_charsRemain">250 characters remaining

3、点击显示新窗口

Java代码

自动弹出窗口 var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' + 'menubar=no,directories=no,location=no,' + 'status=no,resizable=no,scrollbars=yes'); whatsNew.document.write('
news< /center>'); whatsNew.document.write('

this is a test'); whatsNew.document.write('

deos address'); whatsNew.document.write('

'); whatsNew.document.close();

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

方法可在已有的子节点前插入一个新的子节点。 insertBefore(newchild,refchild) }

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

window.force = new ForceWindow();

<body onLoad="window.force.pop('http://deographics.com/')"&gt;

this is a test ! we will open the deographics's website~~

当然还有更好的办法就是

function openWin(){ window.showModalDialog(url,window,"help:no;scroll:no;resizable:no;status:0;dialogWidth:420px;dialogHeight:200px;center:yes"); }

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

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 = ""+ iCount+"";
which.style.border = '1px dotted #FF0000';
which.size=iCount+2;
}else{
alert('Please input letter less than '+ maxchar);
}
}

5、添加收藏夹

6、设置首页

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; } }); } });

或者

8、判断email格式是否正确

9、综合判断用户名(长度,英文字段等)

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、新闻滚动

<ul id="news">

  • New York web design Inc.1
  • Your site will be structured 2
  • hat will communicate the 3
  • hat will communicate the 4
  • hat will communicate the 5
  • hat will communicate the 6
  • hat will communicate the 7
  • hat will communicate the 8
  • hat will communicate the 9
  • New York web design Inc. 10
  • New York web design Inc.11
  • New York web design Inc. 12
  • New York web design Inc. 13
  • New York web design Inc. 14
  • 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 使用)

    或正数

    只能输入数字和小数点的文本框:12、 转换字符串为数字

    函数。前者把值转换成整数,后者把值转换成浮点数。只有对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))

    // 结果是 lo worl

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

    15、分割字符串

    var str = 'this_is_atest!';
    var arr = str.split('_');

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

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

    猜你在找的JavaScript相关文章