javascript 传参练手

来源：互联网发布：数控铣床编程代码d 编辑：程序博客网时间：2024/05/14 14:34
最近学习到了javascript参数传递部分，下面的例子是一个简单的根据数量计算总价的例子。<!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>

 
2、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
0 0