HTML+JavaScript小练习之简易计算器

最新推荐文章于 2024-07-31 22:41:01 发布

原创最新推荐文章于 2024-07-31 22:41:01 发布 · 963 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #JS #CSS

前端学习专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript开发一个简易的web计算器，涵盖输入、删除、清空及显示结果等功能，通过具体代码示例解析计算器的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算器应该是所有图形化程序开发学习中最适合上手的一个小项目了，之前学习Java Swing和Android的时候也是从开发计算器开始做起，这一次使用HTML和JavaScript开发一个功能简单的web计算器吧?

首先确定计算器的功能应该包括：输入、逐个删除、清空所有、显示结果四个部分。

①输入

基本组件为

<input type="button" id="btn_7" value="7" onclick="inputExp('7')" />

为其绑定一个inputExp(symbol) 函数，函数功能是将传入的symbol值添加到表达式框中，比如按钮“7”,入口参数就为7。

  /*将按钮对应的符号组合成表达式*/
        function inputExp(symbol) {
            ele = document.getElementById("expression");
            ele.value += symbol;
        }

②逐个删除

类似于电脑上Backspace的功能按钮，点击则删除表达式最后一位字符。

<input type="button" id="btn_del" value="Del" onclick="deleteSymbol()" />

使用String类中封装的slice()函数完成backspace的功能，获得expression框中的String型表达式的length后-1作为截取终点，再将截取下来的新字符串赋给expression框的value即可实现删除末位字符的功能。

        /*逐个删除*/
        function deleteSymbol() {
            ele = document.getElementById("expression");
            var exp = ele.value;
            var end = exp.length - 1;
            exp = ele.value.slice(0, end);
            ele.value = exp;
        }

③清空所有

点击清空expression框和result框

<input type="button" id="btn_=" value="=" onclick=" giveResult()" />

先后通过document.getElementById()获取组件，再将其value赋值为空字符串即可

    /*清空所有内容*/
        function clearAll() {
            ele = document.getElementById("expression");
            ele.value = "";
            ele = document.getElementById("result")
            ele.value = "";
        }

④显示结果

点击将expression框中的表达式计算，并将结果显示在result框中

<input type="button" id="btn_0" value="0" onclick=" inputExp('0')" />

这里JavaScript提供了非常简便的eval()函数，直接将expression框中的String型表达式作为eval()的入口参数即可计算出结果

     /*计算出结果*/
        function giveResult() {
            ele = document.getElementById("expression");
            resultOfExp = eval(ele.value);
            ele = document.getElementById("result");
            ele.value = resultOfExp;
        }

完整版代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计算器</title>

    <style type="text/css">
        input {
            width: 100px;
            height: 60px;
            font-size: 35px
        }
    </style>

</head>

<body>

    <script type="text/javascript">
        var ele; //用于获取组件
        var resultOfExp;
        /*清空所有内容*/
        function clearAll() {
            ele = document.getElementById("expression");
            ele.value = "";
            ele = document.getElementById("result")
            ele.value = "";
        }

        /*将按钮对应的符号组合成表达式*/
        function inputExp(symbol) {
            ele = document.getElementById("expression");
            ele.value += symbol;
        }

        /*计算出结果*/
        function giveResult() {
            ele = document.getElementById("expression");
            resultOfExp = eval(ele.value);
            ele = document.getElementById("result");
            ele.value = resultOfExp;
        }

        /*逐个删除*/
        function deleteSymbol() {
            ele = document.getElementById("expression");
            var exp = ele.value;
            var end = exp.length - 1;
            exp = ele.value.slice(0, end);
            ele.value = exp;
        }

    </script>

    <table align="center" style="height: 350px; width: 270px; padding-top: 50px">

        <tr>
            <td colspan="4">
                <input type="text" id="expression" style="height: 60px; width: 410px; font-size: 40px" />
            </td>
        </tr>

        <tr>
            <td colspan="4">
                <input type="text" id="result" style="height: 60px; width: 410px; font-size: 40px" />
            </td>
        </tr>

        <tr>
            <td> <input type="button" id="btn_clear" value="C" onclick="clearAll()" /></td>
            <td> <input type="button" id="btn_(" value="("onclick="inputExp('(')" /></td>
            <td> <input type="button" id="btn_)" value=")" onclick="inputExp(')')" /></td>
            <td> <input type="button" id="btn_/" value="/" onclick="inputExp('/')" /></td>
        </tr>

        <tr>
            <td> <input type="button" id="btn_7" value="7" onclick="inputExp('7')" /></td>
            <td> <input type="button" id="btn_8" value="8" onclick="inputExp('8')" /></td>
            <td> <input type="button" id="btn_9" value="9" onclick="inputExp('9')" /></td>
            <td> <input type="button" id="btn_*" value="*" onclick="inputExp('*')" /></td>
        </tr>

        <tr>
            <td> <input type="button" id="btn_4" value="4" onclick="inputExp('4')" /></td>
            <td> <input type="button" id="btn_5" value="5" onclick="inputExp('5')" /></td>
            <td> <input type="button" id="btn_6" value="6" onclick="inputExp('6')" /></td>
            <td> <input type="button" id="btn_-" value="-" onclick="inputExp('-')" /></td>
        </tr>

        <tr>
            <td> <input type="button" id="btn_1" value="1" onclick="inputExp('1')" /></td>
            <td> <input type="button" id="btn_2" value="2" onclick="inputExp('2')" /></td>
            <td> <input type="button" id="btn_3" value="3" onclick="inputExp('3')" /></td>
            <td> <input type="button" id="btn_+" value="+" onclick="inputExp('+')" /></td>
        </tr>

        <tr>
            <td> <input type="button" id="btn_=" value="=" onclick=" giveResult()" /></td>
            <td> <input type="button" id="btn_0" value="0" onclick=" inputExp('0')" /></td>
            <td> <input type="button" id="btn_." value="." onclick=" inputExp('.')" /></td>
            <td> <input type="button" id="btn_del" value="Del" onclick="deleteSymbol()" /></td>
        </tr>

    </table>

</body>

</html>

完成效果：https://calculatorofxm.netlify.com/

总结：计算器程序难度不高，但对于初学阶段而言还是会遇到不少意想不到问题，比如我在为清空按钮绑定事件时候οnclick="clear()"死活就是出不来想要的效果，最后发现clear是JS的保留字之一，改成clearAll之后就顺理运行了。所以还是不能眼高手低，自己动手开发一遍为好。