js写一个简易计算器

最新推荐文章于 2025-06-17 16:07:06 发布

一只柠檬菜鸡

最新推荐文章于 2025-06-17 16:07:06 发布

阅读量1w

点赞数 18

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js 简易计算器

本文链接：https://blog.youkuaiyun.com/weixin_43325590/article/details/89435125

js 专栏收录该内容

8 篇文章

订阅专栏

<!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()来解析为数字。

垃圾经验概括：

var x1=document.getElementById(“txt1”).value;
这个语句刚开始写成：
var x1=document.getElementById(“x1”).value;
自己设置了一个id，但是题目后面< input type=‘text’ id=‘txt1’ /> 这里文本输入框的id已经给出了"txt1",要注意前后id一致的问题。
写这个计算器的时候一般代码是没有问题，最后是把getElementById的I写成了l，这两个字母长得太像啦然后dw也没有报错，之后发觉不了语法错误时要注意字母的拼写是否出错，尤其注意上述字母！！(╯‵□′)╯︵┻━┻