JavaScript练习题：制作一个简单的计算器-CSDN博客

本文链接：https://blog.csdn.net/2401_86440076/article/details/140987977

第一部分：考点与作答区

考点：

事件处理：使用onclick事件处理函数响应用户操作。
基本算术运算：实现加、减、乘、除运算。

作答区： 请创建一个简单的计算器，包含以下功能：

两个输入框，分别用于输入两个数字。
四个按钮，分别代表加、减、乘、除运算。
一个显示结果的文本框。
当点击运算按钮时，显示计算结果。

第二部分：解题思路与答案

解题思路：

使用HTML创建输入框和按钮。
使用JavaScript为每个按钮添加onclick事件处理函数。
在事件处理函数中获取输入框中的数字，并执行相应的算术运算。
将结果显示在文本框中。

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <script>
        function calculate(operation) {
            var num1 = parseFloat(document.getElementById('num1').value);
            var num2 = parseFloat(document.getElementById('num2').value);
            var result;
            switch (operation) {
                case 'add':
                    result = num1 + num2;
                    break;
                case 'subtract':
                    result = num1 - num2;
                    break;
                case 'multiply':
                    result = num1 * num2;
                    break;
                case 'divide':
                    result = num1 / num2;
                    break;
            }
            document.getElementById('result').innerHTML = result;
        }
    </script>
</head>
<body>
    <input type="number" id="num1" placeholder="第一个数字">
    <input type="number" id="num2" placeholder="第二个数字">
    <button onclick="calculate('add')">加</button>
    <button onclick="calculate('subtract')">减</button>
    <button onclick="calculate('multiply')">乘</button>
    <button onclick="calculate('divide')">除</button>
    <p>结果: <span id="result"></span></p>
</body>
</html>

这个练习题的答案创建了一个基本的计算器，可以进行加、减、乘、除运算。用户可以在输入框中输入两个数字，然后点击相应的运算按钮来计算结果。这个练习题适合那些已经掌握了HTML和JavaScript基础，并希望学习如何创建简单交互式网页的开发者。

第三部分：扩展考点与扩展作答区

扩展考点：

错误处理：添加代码以处理可能的输入错误，如非数字输入。
用户界面改进：使用CSS改进计算器的用户界面，使其更加美观和用户友好。

扩展作答区：

添加代码以在用户输入非数字时显示错误消息。
使用CSS为计算器添加样式，如边框、背景色、字体等。

第四部分：扩展解答思路与答案

扩展解答思路：

在JavaScript中添加条件语句来检查输入是否为数字，并在不是数字时显示错误消息。
使用CSS为计算器添加样式。

扩展答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .calculator {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            background-color: #fff;
        }
        .calculator input {
            margin-bottom: 10px;
        }
        .calculator button {
            margin-right: 5px;
        }
        .error {
            color: red;
            font-size: 0.8em;
        }
    </style>
    <script>
        function calculate(operation) {
            var num1 = parseFloat(document.getElementById('num1').value);
            var num2 = parseFloat(document.getElementById('num2').value);
            var result;
            var errorMessage = '';
            if (isNaN(num1) || isNaN(num2)) {
                errorMessage = '请输入有效的数字！';
            } else {
                switch (operation) {
                    case 'add':
                        result = num1 + num2;
                        break;
                    case 'subtract':
                        result = num1 - num2;
                        break;
                    case 'multiply':
                        result = num1 * num2;
                        break;
                    case 'divide':
                        if (num2 === 0) {
                            result = '除数不能为0！';
                        } else {
                            result = num1 / num2;
                        }
                        break;
                }
            }
            document.getElementById('result').innerHTML = result || errorMessage;
        }
    </script>
www.wflqrc.com
www.lslqrcw.com
www.qdhdrc.com
www.jjrcrcw.com
www.jcycrc.com
</head>
<body>
    <div class="calculator">
        <input type="number" id="num1" placeholder="第一个数字">
        <input type="number" id="num2" placeholder="第二个数字">
        <button onclick="calculate('add')">加</button>
        <button onclick="calculate('subtract')">减</button>
        <button onclick="calculate('multiply')">乘</button>
        <button onclick="calculate('divide')">除</button>
        <p id="result"></p>
    </div>
</body>
</html>

在这个扩展答案中，我们通过JavaScript添加了错误处理来检查输入是否为数字，并在不是数字时显示错误消息。同时，我们使用CSS为计算器添加了样式，使其看起来更加美观和用户友好。这个练习题的扩展部分适合那些已经掌握了HTML和JavaScript基础，并希望学习如何创建更完善和用户友好的交互式网页的开发者。