js写一个简易计算器

<!DOCTYPE html>
<html>

<head>
    <title> 简易计算器</title>
    <script type="text/javascript">
        function count() {
            var x1 = document.getElementById("txt1").value;
            //获取第一个输入框的值
            var x2 = document.getElementById("txt2").value;
            //获取第二个输入框的值
            var op = document.getElementById("select").value;
            //获取选择框的值
            var x3;
            switch (op) {
                case '+':
                    x3 = parseFloat(x1) + parseFloat(x2);
                    break;
                case '-':
                    x3 = parseFloat(x1) - parseFloat(x2);
                    break;
                case '*':
                    x3 = parseFloat(x1) * parseFloat(x2);
                    break;
                default:
                    x3 = parseFloat(x1) / parseFloat(x2);
                    break;

            }
            //获取通过下拉框来选择的值来改变加减乘除的运算法则
            document.getElementById("fruit").value = x3;
            //设置结果输入框的值 

        }
    </script>
</head>

<body>
    <input type='text' id='txt1' />
    <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type='text' id='txt2' />
    <input type='button' value=' = ' onclick="count()" />
    <!--通过 = 按钮来调用创建的函数,得到结果-->
    <input type='text' id='fruit' />
</body>

</html>

有关 parseFloat()parseInt() 函数的作用:
函数将字符串转换为浮点型整型数字

比如你在输入框里输入5,
document.getElementById(“txt1”).value
这句返回的值是字符串的“5”,而不是数字的5,要通过parseInt()来解析为数字。

垃圾经验概括:

  1. var x1=document.getElementById(“txt1”).value;
    这个语句刚开始写成:
    var x1=document.getElementById(“x1”).value;
    自己设置了一个id,但是题目后面< input type=‘text’ id=‘txt1’ /> 这里文本输入框的id已经给出了"txt1",要注意前后id一致的问题。

  2. 写这个计算器的时候一般代码是没有问题,最后是把getElementById的I写成了l,这两个字母长得太像啦然后dw也没有报错,之后发觉不了语法错误时要注意字母的拼写是否出错,尤其注意上述字母!!(╯‵□′)╯︵┻━┻

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值