轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / JS实用技巧手记（一）

JS实用技巧手记（一）

阅读：9582 评论：2 作者：ivan 分类：Javascript、授人以渔

有些代码，需要的时候能写的出来，但是也需要时间。同时，如果有的东西长时间不接触，再次看的时候也会感觉很陌生，本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~

1.”金钱“格式转换

运用点：所谓的金钱格式转换就是把数字转换成三位数加一个逗号的格式，使数据变得很直观明了~

例子：YQQFVK~(_G}CUNM]ZIH3)35就像这里的赞功能，点击之后加1，再次点击减1，很简单实现。但是数据是字符串的，加减钱需要用正则转换成数字，但是再显示最后结果时，也需要再次转换成金钱的格式，再通过ajax实现数据的交互。下面来看下怎么实现的 这个是正则，把字符串转换成数字之后，能直接进行运算:如把1,561,124转换成1561124

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

下面的这个是数字转换成金钱格式的函数，也很容易理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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那样能只用多次，下面的这个函数就可以实现多次使用onload的功能

1
2
3
4
5
6
7
8
9
10
11
12
13
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，下面这个函数就实现了这个功能

1
2
3
4
5
6
7
8
9
// insertAfter
function insertAfter(newElement,targetElement){
  var parent=targetElement.parentNode;
  if(parent.lastChild==targetElement){
    parent.appendChild(newElement);
    } else{
      parent.insertBefore(newElement,targetElement.nextSibling);
      }
  }

 

4. 随机数生成

1
2
var rnd = Math.random(); //返回0-1之间的任意小数
var rnd = Math.floor(Math.random() * n); //返回0-n之间的任意整数(不包括n)

5. X进制数字的转换

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

 

6. 格式化显示数字

1
2
3
4
5
var i = 3.14159;
//格式化为两位小数的浮点数
var str = i.toFixed(2); //结果: "3.14"
//格式化为五位数字的浮点数(从左到右五位数字,不够补零)
var str = i.toPrecision(5); //结果: "3.1415"

 

7. 小数转整数

1
2
3
4
var f = 1.5;
var i = Math.round(f); //结果:2 (四舍五入)
var i = Math.ceil(f); //结果:2 (返回大于f的最小整数)
var i = Math.floor(f); //结果:1 (返回小于f的最大整数)

 

8. 异常捕获

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
try{ expression } catch(e){ } finally{}
 
//不处理任何异常
window.onerror = doNothing;
function doNothing(){ return true; }
 
//异常类可用的属性
description : 异常描述(IE,NN)
fileName : 异常页面URI(NN)
lineNumber : 异常行数(NN)
message : 异常描述(IE,NN)
name : 错误类型(IE,NN)
number : 错误代码(IE)
 
//错误信息(兼容所有浏览器)
try{}
catch(e){
    var msg = (e.message) ? e.message : e.description;
    alert(msg);
}

 

9. 延迟函数调用

1
2
3
4
5
var tId = setTimeout("myFun()",1000); //延迟1000毫秒后再调用myFun()函数
fucntion myFun(){
    //do something
    clearTimeout(tId); //销毁对象
}

 

10. 字符串与数字间的转换

1
2
3
4
5
6
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  轩枫

查看更多本系列文章：JS手记

标签：

本文标题：JS实用技巧手记（一） - 轩枫阁

转载请务必注明出处，欢迎分享

如果觉得我的文章对您有用，欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
353/470
355/470

相关阅读

文章评论

  • 阿斯

    真碉堡了

    2013 年 7 月 15 日 下午 5:54
  • 阿炳

    太震撼了，我要好好向你学习了。。。

    2013 年 7 月 15 日 下午 12:25

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间