4-8-编程练习：简陋的计算器

来源：4-8 编程练习

我学习太差被关起来了

2019-12-05 10:22:33

效果可以实现，但是功能弱小。我的完整程序如下：

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <title>4-8-编程练习</title>
        <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link type="text/css" rel="stylesheet" href="index.css">
    </head>

    <body>
        <!--  计算器整体  -->
        <div id="calculation">
            <!--  第1个操作数  -->
            <input type='text' id='operand1' value="1"/>
            <!--  运算符  -->
            <select id='operator'>
                <option value='plus'>+</option>
                <option value="minus">-</option>
                <option value="multiply">×</option>
                <option value="divide">÷</option>
            </select>
            <!--  第2个操作数  -->
            <input type='text' id='operand2' value="2"/>
            <!--  等于号  -->
            <button id="equal"> = </button>
            <!--  运算结果  -->
            <input type='text' id='result' value="3"/>
        </div>


        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

CSS部分：

body
{
    font-size: 18px;
    font-family: "Microsoft YaHei", "微软雅黑";
}

/*计算器整体*/
#calculation
{
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    min-width: 750px;
    min-height: 70px;
}

/*第1个操作数、第2个操作数、等于号*/
#operand1,
#operand2,
#result
{
    width: 200px;
    height: 22px;
    line-height: 22px;
}

/*运算符、等于号*/
#operator,
#equal
{
    width: 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
}

JavaScript部分：

// 定义计算器全局对象
let calculation =
    {
        // 第1个操作数
        operand1: document.getElementById("operand1"),

        // 第2个操作数
        operand2: document.getElementById("operand2"),

        // 运算符
        operator: document.getElementById("operator"),

        // 等于号
        equalSign: document.getElementById("equal"),

        // 运算结果
        result: document.getElementById("result"),
    };

// 运算函数对象
let operationFunction =
    {
        "plus": function(num1, num2)
        {
            return +num1 + +num2;
        },
        "minus": function(num1, num2)
        {
            return num1 - num2;
        },
        "multiply": function(num1, num2)
        {
            return num1 * num2;
        },
        "divide": function(num1, num2)
        {
            return num1 / num2;
        },
    };

// 等于号click事件
calculation.equalSign.addEventListener("click", function()
{
    calculation.result.value = operationFunction[calculation.operator.value](calculation.operand1.value, calculation.operand2.value);
});

写回答

1回答