简单计算器(JavaScript)

妍华之喜

已于 2022-04-27 19:09:26 修改

阅读量549

点赞数 1

文章标签： javascript js 前端

于 2020-11-30 19:41:49 首次发布

本文链接：https://blog.csdn.net/XVJINHUA954/article/details/110400522

版权

这篇博客展示了如何使用JavaScript实现一个简单的计算器。通过HTML构建用户界面，包括数字输入、运算符选择和结果显示。JavaScript代码处理按钮点击事件，根据选择的运算符进行加、减、乘、除操作，并处理除数为零的情况。提供了完整的HTML和JS源码，适合初学者学习。

摘要由CSDN通过智能技术生成

简单计算器(JavaScript)

简单计算器的实现,我们在C#中已经实现过了,其实在JS中大致的原理都是一样的.

运用C#进行简单计算器的实现

运用C#封装实现简易版计算器

闲话少说,直接上源码!

HTML源码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <!-- js运用外链的方式进行引入 -->
    <script src="js/js.js"></script>
</head>

<body>
    <!-- 定义一个表单域,并且让他的数值为get -->
    <form method="get">
        <!-- 定义第一个文本框取名为num1 -->
        <input type="number" id="num1">
        <!-- 定义一个下拉列表框 -->
        <select>
            <!-- 然后定义下拉列表框的内容 -->
            <option value="加">加</option>
            <option value="减">减</option>
            <option value="乘">乘</option>
            <option value="除">除</option>
        </select>
        <!-- 定义第二个文本框取名为num2 -->
        <input type="number" id="num2">
        <!-- 定义一个按钮为等于,触发计算的事件 -->
        <input type="button" value="=" id="dengyv">
        <!-- 定义第三个文本框取名为max -->
        <input type="number" id="max">
    </form>
</body>

</html>

JS源码

// js加载(下面这行代码就是只有当HTML页面渲染完毕以后js引擎才会去执行)
window.onload = function () {
    // 下面这行代码是获取select的option
    // 由于用的是getElementsByTagName所以最后会把option放到一个集合里面
    // 所以我们需要使用[0]索引来找到我们需要的符号
    var ys = document.getElementsByTagName("select")[0];
    // 下面的三个分别是给第一个第二个还有第三个文本框定义一个变量来接收
    var n1 = document.getElementById("num1");
    var n2 = document.getElementById("num2");
    var zong = document.getElementById("max");
    // 获取id为等于的button元素
    var yi = document.getElementById("dengyv");
    // 当button元素被点击的时候触发事件
    yi.onclick = function () {
        // if语句来判断ys.value是不是加
        // 这里的value是HTML页面中option的value值
        // 所以我们用==来判断
        if (ys.value == "加") {
            // 如果判断的结果是加的话  那么就用第一个文本框的值加上第二个文本框的值
            // 然后分别把两个值转换成数字来计算
            // 最后放到第三个框中，放入的过程使用赋值的方法一个等于
            // 最后的显示就会在第三个框中显示
            zong.value = parseInt(n1.value) + parseInt(n2.value);
        }
        else if (ys.value == "减") {
            zong.value = parseInt(n1.value) - parseInt(n2.value);
        }
        else if (ys.value == "乘") {
            zong.value = parseInt(n1.value) * parseInt(n2.value);
        }
        else if (ys.value == "除") {
            // 由于要考虑完整所以我们运算除法的时候，我们需要将分母设置为不能为0
            // 所以需要嵌套一个if
            if (n2.value == 0) {
                alert("你个瓜皮!");
            } else {
                // 然后使用else来显示除法的最后的过程
                zong.value = parseInt(n1.value) / parseInt(n2.value);
            }

        }

    }
}