JS實用技巧手記（一）

有些代碼，需要的時候能寫的出來，但是也需要時間。同時，如果有的東西長時間不接觸，再次看的時候也會感覺很陌生，本系列文章旨在記錄一些實用的javascript技巧，既可以作為一個知識的積累，又可以作為閑暇時打發(fā)時間寫寫代碼的記錄。同時也方便日后翻閱~

1.”金錢“格式轉換

運用點：所謂的金錢格式轉換就是把數(shù)字轉換成三位數(shù)加一個逗號的格式，使數(shù)據變得很直觀明了~

例子： 就像這里的贊功能，點擊之后加1，再次點擊減1，很簡單實現(xiàn)。但是數(shù)據是字符串的，加減錢需要用正則轉換成數(shù)字，但是再顯示最后結果時，也需要再次轉換成金錢的格式，再通過ajax實現(xiàn)數(shù)據的交互。下面來看下怎么實現(xiàn)的 這個是正則，把字符串轉換成數(shù)字之后，能直接進行運算:如把1,561,124轉換成1561124

var sLove=document.getElementById("love");  //slove = 1,561,124
var reg=sLove1.innerHTML.replace(/,/g,"");  //reg = 1561124

下面的這個是數(shù)字轉換成金錢格式的函數(shù)，也很容易理解

function formatCash(cash){
        var str_cash = cash + "";//轉換成字符串
        var ret_cash = "";
        var counter = 0;
        for(var i=str_cash.length-1;i>=0;i--){
            ret_cash = str_cash.charAt(i) + ret_cash;
            counter++;
            if(counter==3){
                counter = 0;
                if(i!=0){
                ret_cash = "," + ret_cash;
                }
            }}
        return ret_cash;
    }
// demo:
var num = 1012145;
formatCash(num);   //1,012,145

2.window.onload使用多次

運用點：window.onload只能使用一次，而不像JQ那樣能只用多次，下面的這個函數(shù)就可以實現(xiàn)多次使用onload的功能

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
// demo：
addLoadEvent(fnName);  //可使用多次

3.insertafter在結點后面插入內容

運用點：js給我們提供了insertbefore，沒有before，下面這個函數(shù)就實現(xiàn)了這個功能

// insertAfter
function insertAfter(newElement,targetElement){
  var parent=targetElement.parentNode;
  if(parent.lastChild==targetElement){
    parent.appendChild(newElement);
    } else{
      parent.insertBefore(newElement,targetElement.nextSibling);
      }
  }
 

4. 隨機數(shù)生成

var rnd = Math.random(); //返回0-1之間的任意小數(shù)
var rnd = Math.floor(Math.random() * n); //返回0-n之間的任意整數(shù)(不包括n)

5. X進制數(shù)字的轉換

var i = parseInt("0x1f",16); //31
var i = parseInt(i,10); //31
var i = parseInt("11010011",2); //211

6. 格式化顯示數(shù)字

var i = 3.14159;
//格式化為兩位小數(shù)的浮點數(shù)
var str = i.toFixed(2); //結果: "3.14"
//格式化為五位數(shù)字的浮點數(shù)(從左到右五位數(shù)字,不夠補零)
var str = i.toPrecision(5); //結果: "3.1415"

7. 小數(shù)轉整數(shù)

var f = 1.5;
var i = Math.round(f); //結果:2 (四舍五入)
var i = Math.ceil(f); //結果:2 (返回大于f的最小整數(shù))
var i = Math.floor(f); //結果:1 (返回小于f的最大整數(shù))

8. 異常捕獲

try{ expression } catch(e){ } finally{}
//不處理任何異常
window.onerror = doNothing;
function doNothing(){ return true; }
//異常類可用的屬性
description : 異常描述(IE,NN)
fileName : 異常頁面URI(NN)
lineNumber : 異常行數(shù)(NN)
message : 異常描述(IE,NN)
name : 錯誤類型(IE,NN)
number : 錯誤代碼(IE)
//錯誤信息(兼容所有瀏覽器)
try{}
catch(e){
    var msg = (e.message) ? e.message : e.description;
    alert(msg);
}

9. 延遲函數(shù)調用

var tId = setTimeout("myFun()",1000); //延遲1000毫秒后再調用myFun()函數(shù)
fucntion myFun(){
    //do something
    clearTimeout(tId); //銷毀對象
}

10. 字符串與數(shù)字間的轉換

var i = 1;
var str = i.toString(); //結果: "1"
var str = new String(i); //結果: "1"
i = parseInt(str); //結果: 1
i = parseFloat(str); //結果: 1.0
//注意: parseInt,parseFloat會把一個類似于"32G"的字符串,強制轉換成32

更新于2013/11/17  軒楓