javascript 传参练手

最近学习到了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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值