有些代码,需要的时候能写的出来,但是也需要时间。同时,如果有的东西长时间不接触,再次看的时候也会感觉很陌生,本系列文章旨在记录一些实用的javascript技巧,既可以作为一个知识的积累,又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~
1.”金钱“格式转换
运用点:所谓的金钱格式转换就是把数字转换成三位数加一个逗号的格式,使数据变得很直观明了~
例子:就像这里的赞功能,点击之后加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手记
真碉堡了
太震撼了,我要好好向你学习了。。。