javascript案例-简易计算器

程序页面图如下图

可以看出它需要一个标题，三个input标签，4个button标签，每一行这里用p标签表示

html 复制代码

   <div>
        <h2>简易计算器</h2>
        <p>
            第一个数:<input type="text" id="num1">
            
        </p>
        <p>
            第二个数:<input type="text" id="num2">
        </p>
        <p>
            <button onclick="calc('+')">+</button>
            <button onclick="calc('-')">-</button>
            <button onclick="calc('*')">*</button>
            <button onclick="calc('/')">/</button>
        </p>
        <p>
            结果:<input type="text" id="result" disabled>
        </p>
    </div>

因为要对input标签要进行DOM操作，因此分别在两个input标签分别设置id为num1,num2，最后输出结果框，设置id为result，因为它只管输出，因此加了个disabled属性

button需要设置事件，事件里面设置一个calc函数，函数的不同效果通过里面传参决定

这里对button简单设置一下css属性

css 复制代码

        button {
            width:77px;
            height:25px;
        }

下面要对button事件里面的javascript函数进行设置

步骤1

分别获取id为num1和num2的input标签获取的值

这里为了简化代码操作，对获取DOM对象代码进行简单封装

javascript 复制代码

    function $(id)
        {
                return document.getElementById(id)
        }

javascript 复制代码

let num1=Number($("num1").value)
    let num2=Number($("num2").value)

步骤2

定义一个变量result，通过分支结构设置获取不同实参的值有什么反应

javascript 复制代码

let result
    switch(flag) {
        case "+":
            result=num1+num2
            break
        case "-":
            result=num1-num2
            break
        case "*":
            result=num1*num2
            break
        case "/":
            result=num1/num2
            break
    }

步骤3

将result的值传入id为result的input标签里

javascript 复制代码

 $('result').value=result

整个函数代码如下

javascript 复制代码

       function $(id)
        {
                return document.getElementById(id)
        }
       function calc(flag) {
    let num1=Number($("num1").value)
    let num2=Number($("num2").value)
    let result
    switch(flag) {
        case "+":
            result=num1+num2
            break
        case "-":
            result=num1-num2
            break
        case "*":
            result=num1*num2
            break
        case "/":
            result=num1/num2
            break
    }
    $('result').value=result
}

整个html代码如下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易计算器</title>
    <style>
        button {
            width:77px;
            height:25px;
        }
    </style>
</head>
<body>
    <div>
        <h2>简易计算器</h2>
        <p>
            第一个数:<input type="text" id="num1">
            
        </p>
        <p>
            第二个数:<input type="text" id="num2">
        </p>
        <p>
            <button onclick="calc('+')">+</button>
            <button onclick="calc('-')">-</button>
            <button onclick="calc('*')">*</button>
            <button onclick="calc('/')">/</button>
        </p>
        <p>
            结果:<input type="text" id="result" disabled>
        </p>
    </div>
    <script>
        function $(id)
        {
                return document.getElementById(id)
        }
       function calc(flag) {
    let num1=Number($("num1").value)
    let num2=Number($("num2").value)
    let result
    switch(flag) {
        case "+":
            result=num1+num2
            break
        case "-":
            result=num1-num2
            break
        case "*":
            result=num1*num2
            break
        case "/":
            result=num1/num2
            break
    }
    $('result').value=result
}
    </script>
</body>
</html>