您的位置：首页 > Web前端 > JavaScript

javascript 传参练手

2016-04-23 12:27 603 查看 
最近学习到了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"); //返回 56var num = parseInt("red"); //返回 NaNvar num = parseInt("red123"); //返回 NaNparseInt() 方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt() 方法的第二个参数指定的，当然，对二进制、八进制、十六进制甚至十进制（默认模式），都可以调用 parseInt() 方法：var num = parseInt("10", 2); //将'10'转换成二进制数字返回 2var num = parseInt("10",; //将'10'转换成八进制数字返回 8var num = parseInt("10", 10); //将'10'转换成十进制数字返回返回 10var num = parseInt("F", 16); //将'F'转换成十六进制数字返回 15parseInt(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",; //返回 8var 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() 会把这个小数点之前的字符转换成数ae3c字！并且，与parseInt()不同。parseFloat() 要求输入的字符串必须以十进制表示浮点数。所以，八进制数'010'会被转换成10，而十六进制数'0xF'会被解析成0举例如下：var num = parseFloat("123abc"); //返回 123var num = parseFloat("0xA"); //返回 0var num = parseFloat("11.2"); //返回 11.2var num = parseFloat("11.22.33"); //返回 11.22var num = parseFloat("0102"); //返回 102var 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) //0Number(true) //1Number(undefined) //NaNNumber(null) //0	　　Number(new object()) //NaNNumber() //0Number(' ') //0如果使用parseInt()/parseFloat() 转换上述值，返回结果都是NaN !Number("1.2.3") //NaNNumber(50) //50Number("1.2") //1.2Number("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"); //返回 56var num = parseInt("red"); //返回 NaNvar num = parseInt("red123"); //返回 NaNparseInt() 方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt() 方法的第二个参数指定的，当然，对二进制、八进制、十六进制甚至十进制（默认模式），都可以调用 parseInt() 方法：var num = parseInt("10", 2); //将'10'转换成二进制数字返回 2var num = parseInt("10",; //将'10'转换成八进制数字返回 8var num = parseInt("10", 10); //将'10'转换成十进制数字返回返回 10var num = parseInt("F", 16); //将'F'转换成十六进制数字返回 15parseInt(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",; //返回 8var 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"); //返回 123var num = parseFloat("0xA"); //返回 0var num = parseFloat("11.2"); //返回 11.2var num = parseFloat("11.22.33"); //返回 11.22var num = parseFloat("0102"); //返回 102var 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) //0Number(true) //1Number(undefined) //NaNNumber(null) //0	　　Number(new object()) //NaNNumber() //0Number(' ') //0如果使用parseInt()/parseFloat() 转换上述值，返回结果都是NaN !Number("1.2.3") //NaNNumber(50) //50Number("1.2") //1.2Number("12") //12

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                参数传递
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航