最近学习到了javascript参数传递部分,下面的例子是一个简单的根据数量计算总价的例子。2、<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li { list-style-type: none; } </style> <script> window.onload = function(){ var oUl = document.getElementById('list'); var aLi = oUl.getElementsByTagName('li'); for(var i = 0;i<aLi.length;i++){ fnl(aLi[i]); } function fnl(oLi){ var aBtn = oLi.getElementsByTagName('input'); var oStg = oLi.getElementsByTagName('strong')[0]; var oEm = oLi.getElementsByTagName('em')[0]; var oSpan = oLi.getElementsByTagName('span')[0]; var n1 = parseFloat(oStg.innerHTML); //parseFloat()方法只转换第一个无效字符之前的字符串。如“3.4.5”被转换成“3.4” var n2 = parseFloat(oEm.innerHTML); aBtn[0].onclick = function(){ n1 --; if(n1<0){ n1 = 0; } oStg.innerHTML = n1; oSpan.innerHTML = n1*n2 + '元'; }; aBtn[1].onclick = function(){ n1 ++; oStg.innerHTML = n1; oSpan.innerHTML = n1*n2 + '元'; }; } }; </script> </head> <body> <ul id="list"> <li> <input type="button" value="-"/><strong>0</strong><input type="button" value="+"> 单价:<em>10</em> 总价:<span>0元</span> </li> <li> <input type="button" value="-"><strong>0</strong><input type="button" value="+"> 单价:<em>20元</em> 总价:<span>0元</span> </li> <li> <input type="button" value="-"><strong>0</strong><input type="button" value="+"> 单价:<em>30元</em> 总价:<span>0元</span> </li> <li> <input type="button" value="-"><strong>0</strong><input type="button" value="+"> 单价:<em>40元</em> 总价:<span>0元</span> </li> </ul> </body> </html>
parseFloat()
parseInt()
Number() 三者的区别
parseFloat()parseInt() 方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN,不再继续执行其他操作。 但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止, 此时 parseInt() 将把该字符之前的字符串转换成数字。 常规用法举例说明: var num = parseInt("12abc"); //返回 12 var num = parseInt("56.9"); //返回 56 var num = parseInt("red"); //返回 NaN var num = parseInt("red123"); //返回 NaN parseInt() 方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt() 方法的 第二个参数指定的,当然,对二进制、八进制、十六进制甚至十进制(默认模式),都可以调用 parseInt() 方法: var num = parseInt("10", 2); //将'10'转换成二进制数字返回 2 var num = parseInt("10",; //将'10'转换成八进制数字返回 8 var num = parseInt("10", 10); //将'10'转换成十进制数字返回返回 10 var num = parseInt("F", 16); //将'F'转换成十六进制数字返回 15 parseInt(str)(默认模式)与parseInt(str,10) 都是将字符串转换成十进制的数字。但还是强烈建议使用时加上第二个参数。 因为有如下可能出现: var num = parseInt("0xF"); // 字符串'0xF'被认为是十六进制数,转换成十进制返回 15。这种情况是正确的。 如果输入字符串数字前面有0,比如'010',结果就不太一样了: //经测试,在IE9与Chrome最新版,中'010'会被当做十进制数,返回10。但是在FireFox19中返回结果为8!输入'010'被当成了八进制数。 var num = parseInt("010"); 所以还是强烈建议加上第二个参数使用。 var num = parseInt("010",; //返回 8 var num = parseInt("010", 10); //返回 10 ②使用parseFloat()转换浮点数 parseFloat() 的作用 被描述为 Parses a string argument and returns a floating point number.. parseFloat() 的使用方式:var num = parseFloat(string); parseFloat() 方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止, 然后把该字符之前的字符串转换成整数。不过,对于这个方法来说,第一个出现的小数点是有效字符。如果有两个小数点, 第二个小数点将被看作无效的。parseFloat() 会把这个小数点之前的字符转换成数字!并且,与parseInt()不同。 parseFloat() 要求输入的字符串必须以十进制表示浮点数。所以,八进制数'010'会被转换成10,而十六进制数'0xF'会被解析成0 举例如下: var num = parseFloat("123abc"); //返回 123 var num = parseFloat("0xA"); //返回 0 var num = parseFloat("11.2"); //返回 11.2 var num = parseFloat("11.22.33"); //返回 11.22 var num = parseFloat("0102"); //返回 102 var num = parseFloat("red"); //返回 NaN ③使用Number()强制类型转换为数值型 Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。 parseInt() 和 parseFloat() 方法只转换第一个无效字符之前的字符串,因此 "1.2.3" 将分别被转换为 "1" 和 "1.2"。 用 Number() 进行强制类型转换,"1.2.3" 将返回 NaN,因为整个字符串值不能转换成数字。 如果字符串值能被完整地转换,Number() 将判断是调用 parseInt() 方法还是 parseFloat() 方法。 使用举例及对比: Number(false) //0 Number(true) //1 Number(undefined) //NaN Number(null) //0 Number(new object()) //NaN Number() //0 Number(' ') //0 如果使用parseInt()/parseFloat() 转换上述值,返回结果都是NaN ! Number("1.2.3") //NaN Number(50) //50 Number("1.2") //1.2 Number("12") //12转换有符号整数 parseInt() 的作用 被描述为 Parses a string argument and returns an integer of the specified radix or base. parseInt() 的使用方式:var num = parseInt(string[,radix]); parseInt() 方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN,不再继续执行其他操作。 但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止, 此时 parseInt() 将把该字符之前的字符串转换成数字。 常规用法举例说明: var num = parseInt("12abc"); //返回 12 var num = parseInt("56.9"); //返回 56 var num = parseInt("red"); //返回 NaN var num = parseInt("red123"); //返回 NaN parseInt() 方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt() 方法的 第二个参数指定的,当然,对二进制、八进制、十六进制甚至十进制(默认模式),都可以调用 parseInt() 方法: var num = parseInt("10", 2); //将'10'转换成二进制数字返回 2 var num = parseInt("10",; //将'10'转换成八进制数字返回 8 var num = parseInt("10", 10); //将'10'转换成十进制数字返回返回 10 var num = parseInt("F", 16); //将'F'转换成十六进制数字返回 15 parseInt(str)(默认模式)与parseInt(str,10) 都是将字符串转换成十进制的数字。但还是强烈建议使用时加上第二个参数。 因为有如下可能出现: var num = parseInt("0xF"); // 字符串'0xF'被认为是十六进制数,转换成十进制返回 15。这种情况是正确的。 如果输入字符串数字前面有0,比如'010',结果就不太一样了: //经测试,在IE9与Chrome最新版,中'010'会被当做十进制数,返回10。但是在FireFox19中返回结果为8!输入'010'被当成了八进制数。 var num = parseInt("010"); 所以还是强烈建议加上第二个参数使用。 var num = parseInt("010",; //返回 8 var num = parseInt("010", 10); //返回 10 ②使用parseFloat()转换浮点数 parseFloat() 的作用 被描述为 Parses a string argument and returns a floating point number.. parseFloat() 的使用方式:var num = parseFloat(string); parseFloat() 方法与parseInt()方法的处理方式相似,从位置0开始查看每个字符,直到找到第一个非有效的字符为止, 然后把该字符之前的字符串转换成整数。不过,对于这个方法来说,第一个出现的小数点是有效字符。如果有两个小数点, 第二个小数点将被看作无效的。parseFloat() 会把这个小数点之前的字符转换成数字!并且,与parseInt()不同。 parseFloat() 要求输入的字符串必须以十进制表示浮点数。所以,八进制数'010'会被转换成10,而十六进制数'0xF'会被解析成0 举例如下: var num = parseFloat("123abc"); //返回 123 var num = parseFloat("0xA"); //返回 0 var num = parseFloat("11.2"); //返回 11.2 var num = parseFloat("11.22.33"); //返回 11.22 var num = parseFloat("0102"); //返回 102 var num = parseFloat("red"); //返回 NaN ③使用Number()强制类型转换为数值型 Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。 parseInt() 和 parseFloat() 方法只转换第一个无效字符之前的字符串,因此 "1.2.3" 将分别被转换为 "1" 和 "1.2"。 用 Number() 进行强制类型转换,"1.2.3" 将返回 NaN,因为整个字符串值不能转换成数字。 如果字符串值能被完整地转换,Number() 将判断是调用 parseInt() 方法还是 parseFloat() 方法。 使用举例及对比: Number(false) //0 Number(true) //1 Number(undefined) //NaN Number(null) //0 Number(new object()) //NaN Number() //0 Number(' ') //0 如果使用parseInt()/parseFloat() 转换上述值,返回结果都是NaN ! Number("1.2.3") //NaN Number(50) //50 Number("1.2") //1.2 Number("12") //12
javascript 传参练手
最新推荐文章于 2023-09-28 16:48:04 发布