最简单的用js模拟计算器进行计算(初级)

    <h1>计算器</h1>
    <input type="number" name="" id="num1">
    <br>
    <input type="number" name="" id="num2">
    <br>
    <button onclick="func('+')">+</button>
    <button onclick="func('-')">-</button>
    <button onclick="func('*')">×</button>
    <button onclick="func('/')">÷</button>
    <h2>结果：<span id="res"></span></h2>

    /*
    设计思路：
    1.获取元素
    2.编写方法   + - * /
    3.获取两个输入框的值
    4.调用方法
    */

    // 声明全局变量   储存计算结果
    var res;
    // 1.获取元素
    var oNum1 = document.getElementById("num1");
    var oNum2 = document.getElementById("num2");
    var aBtns = document.getElementsByTagName("button"); //数组
    var oText = document.getElementById("res");


    // 2.编写方法   
    // 加法
    // aBtns[0].onclick = function () {
    //     // 2.获取两个输入框的值
    //     var oVal1 = Number(oNum1.value);
    //     var oVal2 = Number(oNum2.value);
    //     res = oVal1 + oVal2;
    //     console.log(res);
    //     oText.innerText = res;
    // }
    // 减法
    // aBtns[1].onclick = function () {
    //     // 2.获取两个输入框的值
    //     var oVal1 = Number(oNum1.value);
    //     var oVal2 = Number(oNum2.value);
    //     res = oVal1 - oVal2;
    //     console.log(res);
    //     oText.innerText = res;
    // }
    
    // 以下代码太啰嗦，需要重复使用，进行简化（封装）,如下：
    // 2.编写方法  将不同的操作类型作为参数
    function func(x) {
        // 3.获取两个输入框的值
        var oVal1 = Number(oNum1.value);
        var oVal2 = Number(oNum2.value);
        res = eval(oVal1 + x + oVal2);
        console.log(res);
        oText.innerText = res;
    }
    
    // 4.调用方法   为了方便直接将方法在HTML行内进行调用 
    // aBtns[0].οnclick=function(){
    //     func("+");
    // };