JavaScript 类型转换

2019-05-31 10:45:55 浏览数 (1)

1、直接转换 parseInt() 与 parseFloat()

代码语言：javascript复制
alert('12' 7); //弹出127
alert( parseInt('12')   7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6' 2.3);  // 弹出5.62.3
alert(parseFloat('5.6') 2.3);  // 弹出7.8999999999999995
alert(0.1 0.2); //弹出 0.3000000000000004
alert((0.1*100 0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100 2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

代码语言：javascript复制
if('3'==3)
{
    alert('相等');
}
// 弹出'相等'

alert('10'-3);  // 弹出7

3、NaN 和 isNaN

代码语言：javascript复制
alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

练习

制作一个计算器，可以计算加、减、乘、除，用户输入非数字或者置空可以提示

实现了基本算法之后，再加上输入非数字的判断，如下：

完整代码如下：

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function(){
            // 获取文本框的两个数值
            var oNum1 = document.getElementById('input1');
            var oNum2 = document.getElementById('input2');

            var iBtn1 = document.getElementById('input3');
            var iBtn2 = document.getElementById('input4');
            var iBtn3 = document.getElementById('input5');
            var iBtn4 = document.getElementById('input6');

            var iSpan = document.getElementsByTagName('span')[0];

            // 加法
            iBtn1.onclick = function(){
                checkNum(oNum1.value,oNum2.value); //检查输入是否为数字
                var result = parseFloat(oNum1.value)   parseFloat(oNum2.value);
                result = Math.floor(result);
                iSpan.innerHTML = result;
            }

            // 减法
            iBtn2.onclick = function(){
                checkNum(oNum1.value,oNum2.value); //检查输入是否为数字
                var result = parseFloat(oNum1.value) - parseFloat(oNum2.value);
                result = Math.floor(result);
                iSpan.innerHTML = result;
            }

            // 乘法
            iBtn3.onclick = function(){
                checkNum(oNum1.value,oNum2.value); //检查输入是否为数字
                var result = parseFloat(oNum1.value) * parseFloat(oNum2.value);
                result = Math.floor(result);
                iSpan.innerHTML = result;
            }

            // 除法
            iBtn4.onclick = function(){
                checkNum(oNum1.value,oNum2.value); //检查输入是否为数字
                var result = parseFloat(oNum1.value) / parseFloat(oNum2.value);
                result = Math.floor(result);
                iSpan.innerHTML = result;
            }

            function checkNum(num1,num2){

                    var reg=/^[0-9] .?[0-9]*$/; //判断字符串是否为数字 ，判断正整数用/^[1-9] [0-9]*]*$/

                    if(!reg.test(num1)){
                        alert("请输入数字");
                        return false;
                    }

                    if(!reg.test(num2)){
                        alert("请输入数字");
                        return false;
                    }

            }

        }
    </script>
</head>
<body>
    <input type="text" name="num1" id="input1">
    <input type="text" name="num2" id="input2">
    <input type="button" name="fn" id="input3" value="加">
    <input type="button" name="fn" id="input4" value="减">
    <input type="button" name="fn" id="input5" value="乘">
    <input type="button" name="fn" id="input6" value="除">
    <div>结果:<span></span></div>
</body>
</html>
nan 算法

0 人点赞