使用JavaScript创建特定的计算器

可以通过HTML和JavaScript的结合来实现。下面是一个简单的示例：

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <style>
        .calculator {
            width: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f5f5f5;
        }
        .calculator input[type="button"] {
            width: 40px;
            height: 40px;
            margin: 5px;
            font-size: 20px;
        }
        .calculator input[type="text"] {
            width: 100%;
            margin-bottom: 10px;
            padding: 5px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <input type="button" value="1" onclick="appendNumber(1)">
        <input type="button" value="2" onclick="appendNumber(2)">
        <input type="button" value="3" onclick="appendNumber(3)">
        <input type="button" value="+" onclick="appendOperator('+')">
        <br>
        <input type="button" value="4" onclick="appendNumber(4)">
        <input type="button" value="5" onclick="appendNumber(5)">
        <input type="button" value="6" onclick="appendNumber(6)">
        <input type="button" value="-" onclick="appendOperator('-')">
        <br>
        <input type="button" value="7" onclick="appendNumber(7)">
        <input type="button" value="8" onclick="appendNumber(8)">
        <input type="button" value="9" onclick="appendNumber(9)">
        <input type="button" value="*" onclick="appendOperator('*')">
        <br>
        <input type="button" value="0" onclick="appendNumber(0)">
        <input type="button" value="." onclick="appendDecimal()">
        <input type="button" value="=" onclick="calculate()">
        <input type="button" value="/" onclick="appendOperator('/')">
        <br>
        <input type="button" value="C" onclick="clearResult()">
    </div>

    <script src="calculator.js"></script>
</body>
</html>

JavaScript部分（保存为calculator.js）：

let result = document.getElementById('result');

function appendNumber(number) {
    result.value += number;
}

function appendOperator(operator) {
    result.value += operator;
}

function appendDecimal() {
    if (!result.value.includes('.')) {
        result.value += '.';
    }
}

function calculate() {
    try {
        result.value = eval(result.value);
    } catch (error) {
        result.value = 'Error';
    }
}

function clearResult() {
    result.value = '';
}

这个计算器使用HTML和CSS创建了一个简单的界面，通过JavaScript实现了基本的计算功能。用户可以点击按钮输入数字、运算符和小数点，并通过等号按钮计算结果。计算器的结果显示在一个只读的文本框中，用户可以通过清除按钮清除结果。

这个计算器示例是一个简单的前端开发实践，适用于需要进行简单数学计算的场景。对于更复杂的计算需求，可以根据具体情况进行扩展和优化。

使用JavaScript创建特定的计算器

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐