javascript常用函數（上）

2024-05-06 16:24:56

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript常用函數，15個常用函數，都具有很高的實用性，感興趣的小伙伴們可以參考一下

文章主要內容列表：

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

// 復雜型（中文或者中英文混合截?。?nbsp;

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