JavaScript每天一练：简易计算机的实现（两种计算机样式）

前端小媛

于 2022-07-26 23:54:47 发布

阅读量980

点赞数 3

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_59012240/article/details/126005442

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了两种计算机编程形式，第一种通过HTML和JavaScript实现基本算术运算，包括HTML表单交互和代码优化；第二种展示了使用HTML和下拉菜单结合JavaScript的简单计算，便于输入和操作。两种方式对比了其实现细节和简洁性。

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

一、第一种计算机形式

1、第一种写法

HTML部分代码

<body>
    第一个数： <input type="text" id="num1" value=" "> <br>
    第二个数： <input type="text" id="num2" value=" "><br>
    <button onclick="add()">+</button>
    <button onclick="sub()">-</button>
    <button onclick="cheng()">*</button>
    <button onclick="chu()">/</button>
    <br>
    结果： <input type="text" id="res" value=" ">

</body>

JavaScript 代码部分


<script>
    var ipt1 = document.getElementById("num1")  // 获取input 元素对象
    var ipt2 = document.getElementById("num2")  // 获取input 元素对象
    var ipt = document.getElementById("res")  // 获取input 元素对象
    //加法  函数
    function add() {

        var n1 = +ipt1.value; // 获取第一个input里的输入值
        var n2 = +ipt2.value; // 获取第2个input里的输入值
        if (isNaN(n1) === false && isNaN(n2) === false) {
            //等价于    if (!isNaN(n1) && !isNaN(n2))
            ipt.value = n1 + n2;
        } else {
            alert("请输入正确的数字");
        }
    }
    // 减法  函数
    function sub() {
        var n1 = +ipt1.value; // 获取第一个input里的输入值
        var n2 = +ipt2.value; // 获取第2个input里的输入值
        ipt.value = n1 - n2;
    }

结果实现：

2、代码优化

HTML代码部分

<body>
    第一个数： <input type="text" id="num1" value=" "> <br>
    第二个数： <input type="text" id="num2" value=" "><br>
    <button onclick="calc('+')">+</button>
    <button onclick="calc('-')">-</button>
    <button onclick="calc('*')">*</button>
    <button onclick="calc('/')">/</button>
    <br>
    结果： <input type="text" id="res" value=" ">
</body>

JavaScript 代码部分

<script>
    var ipt1 = document.getElementById("num1")  // 获取input 元素对象
    var ipt2 = document.getElementById("num2")  // 获取input 元素对象
    var ipt = document.getElementById("res")  // 获取input 元素对象

    //  简化，命名同名函数   通过函数传参
    function calc(fh) {
        var n1 = +ipt1.value; // 获取第一个input里的输入值
        var n2 = +ipt2.value; // 获取第2个input里的输入值
        if (fh === "+") {
            res.value = n1 + n2;
        } else if (fh === "-") {
            res.value = n1 - n2;
        } else if (fh === "*") {
            res.value = n1 * n2;
        } else if (fh === "/") {
            res.value = n1 / n2;
        }
    }

//  可以通过 .value  来获取值的标签 input、textarea、select、
</script>

结果运行如下

二、第二种计算机形式

html代码部分

<body>
    <input type="text" id="num1" value=""> <!-- 定义第一个输入文本框 -->
    <select id="sel">
        <!-- 定义下拉框 -->
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" id="num2" value=""> <!-- 定义第二个输入文本框 -->
    <button id="button">=</button>
    <input type="text" id="res" value=""> <!-- 定义输入结果文本框 -->
</body>

JavaScript 代码部分

<script>
    var ipt1 = document.getElementById("num1");  // 得到第一个文本框的内容
    var ipt2 = document.getElementById("num2");// 得到第二个文本框的内容
    var select = document.getElementById("sel");   // 得到下拉框的内容
    var btn = document.getElementById("button"); // 得到=
    var ipt = document.getElementById("res"); // 得到结果
    var num; // 定义一个变量，将最后得到的值赋值给num

    btn.onclick = function () {  // 这个意思是当我们点击btn的时候执行下面的代码
        var n1 = +ipt1.value;
        var n2 = +ipt2.value;
        switch (select.value) {
            case "+":
                num = n1 + n2;
                break;
            case "-":
                num = n1 - n2;
                break;
            case "*":
                num = n1 * n2;
                break;
            case "/":
                num = n1 / n2;
                break;
            default:
                num = n1 + n2;
                break;
        }
        ipt.value = num; // 将最后的num值赋值给ipt，在第三个文本框中显示出来
    }

</script>

结果运行实现