正文

如何用HTML5和JavaScript轻松打造实用计算器

/0 浏览量
0813

创建一个实用的计算器是一个很好的练习项目，它可以帮助你巩固HTML5、CSS和JavaScript的知识。下面，我将一步步带你完成这个项目。

1. 设计计算器的界面

首先，我们需要设计计算器的布局。我们可以使用HTML5的div元素来创建一个简单的布局，并用CSS来美化它。

HTML结构

<div id="calculator">
    <input type="text" id="display" disabled>
    <div class="row">
        <button onclick="appendNumber('1')">1</button>
        <button onclick="appendNumber('2')">2</button>
        <button onclick="appendNumber('3')">3</button>
        <button onclick="setOperator('+')">+</button>
    </div>
    <div class="row">
        <button onclick="appendNumber('4')">4</button>
        <button onclick="appendNumber('5')">5</button>
        <button onclick="appendNumber('6')">6</button>
        <button onclick="setOperator('-')">-</button>
    </div>
    <div class="row">
        <button onclick="appendNumber('7')">7</button>
        <button onclick="appendNumber('8')">8</button>
        <button onclick="appendNumber('9')">9</button>
        <button onclick="setOperator('*')">*</button>
    </div>
    <div class="row">
        <button onclick="appendNumber('0')">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="setOperator('/')">/</button>
    </div>
</div>

CSS样式

#calculator {
    width: 300px;
    margin: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#display {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    text-align: right;
}

.row {
    margin-bottom: 5px;
}

button {
    width: 24%;
    padding: 10px;
    margin-right: 2%;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #f0f0f0;
}

2. 实现计算器的功能

接下来，我们需要用JavaScript来实现计算器的逻辑。

JavaScript代码

let currentInput = '';
let operator = '';
let previousInput = '';

function appendNumber(number) {
    currentInput += number;
    updateDisplay();
}

function setOperator(op) {
    if (currentInput === '') return;
    if (previousInput !== '') {
        calculate();
    }
    operator = op;
    previousInput = currentInput;
    currentInput = '';
}

function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);
    if (isNaN(prev) || isNaN(current)) return;
    switch (operator) {
        case '+':
            result = prev + current;
            break;
        case '-':
            result = prev - current;
            break;
        case '*':
            result = prev * current;
            break;
        case '/':
            if (current === 0) {
                alert('Cannot divide by zero!');
                return;
            }
            result = prev / current;
            break;
        default:
            return;
    }
    currentInput = result.toString();
    operator = '';
    previousInput = '';
    updateDisplay();
}

function clearDisplay() {
    currentInput = '';
    operator = '';
    previousInput = '';
    updateDisplay();
}

function updateDisplay() {
    document.getElementById('display').value = currentInput;
}

3. 优化和测试

完成以上步骤后，你应该有一个基本的工作计算器了。现在，你可以进行以下优化和测试：

  • 优化用户体验：你可以添加更多的功能，比如清除单个数字、添加括号等。
  • 测试：在不同的浏览器和设备上测试你的计算器，确保其功能正常。
  • 响应式设计：使用媒体查询来确保计算器在不同屏幕尺寸上都能良好显示。

通过这个项目，你不仅能够巩固HTML5、CSS和JavaScript的基础知识，还能学会如何将理论知识应用到实践中。祝你打造出一个优秀的计算器！

-- 展开阅读全文 --