js计算器的代码怎么打

创建一个简单的JavaScript计算器

实现一个简单的JavaScript计算器的代码主要包括以下几个步骤：创建HTML结构、编写CSS样式、添加JavaScript功能。以下是一个简单但功能齐全的JavaScript计算器代码示例。

一、HTML结构

首先，我们需要创建一个基本的HTML文件结构来放置我们的计算器界面。HTML文件将包含一个显示屏和一些按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="btn" onclick="clearDisplay()">C</button>
            <button class="btn" onclick="appendValue('/')">/</button>
            <button class="btn" onclick="appendValue('*')">*</button>
            <button class="btn" onclick="deleteLast()">DEL</button>
            <button class="btn" onclick="appendValue('7')">7</button>
            <button class="btn" onclick="appendValue('8')">8</button>
            <button class="btn" onclick="appendValue('9')">9</button>
            <button class="btn" onclick="appendValue('-')">-</button>
            <button class="btn" onclick="appendValue('4')">4</button>
            <button class="btn" onclick="appendValue('5')">5</button>
            <button class="btn" onclick="appendValue('6')">6</button>
            <button class="btn" onclick="appendValue('+')">+</button>
            <button class="btn" onclick="appendValue('1')">1</button>
            <button class="btn" onclick="appendValue('2')">2</button>
            <button class="btn" onclick="appendValue('3')">3</button>
            <button class="btn" onclick="calculate()">=</button>
            <button class="btn" onclick="appendValue('0')">0</button>
            <button class="btn" onclick="appendValue('.')">.</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式

接下来，我们将编写一些CSS样式来美化我们的计算器界面。这些样式将包括对显示屏和按钮的样式设置。

/* style.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}
.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.display {
    background-color: #222;
    color: #fff;
    font-size: 2em;
    padding: 20px;
    text-align: right;
    border-radius: 5px;
    margin-bottom: 20px;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.btn {
    padding: 20px;
    font-size: 1.5em;
    border: none;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn:hover {
    background-color: #ddd;
}

三、JavaScript功能

最后，我们需要编写JavaScript代码来实现计算器的功能，包括数字和操作符的输入、计算结果的显示和一些基本操作如清空和删除。

// script.js
let display = document.getElementById('display');
let currentInput = '';
let resultDisplayed = false;
function appendValue(value) {
    if (resultDisplayed) {
        currentInput = '';
        resultDisplayed = false;
    }
    currentInput += value;
    display.innerText = currentInput;
}
function clearDisplay() {
    currentInput = '';
    display.innerText = '0';
}
function deleteLast() {
    currentInput = currentInput.slice(0, -1);
    display.innerText = currentInput || '0';
}
function calculate() {
    try {
        let result = eval(currentInput);
        display.innerText = result;
        currentInput = result;
        resultDisplayed = true;
    } catch (e) {
        display.innerText = 'Error';
        currentInput = '';
    }
}

四、总结

通过以上三个步骤，我们已经成功创建了一个简单但功能齐全的JavaScript计算器。你可以根据自己的需要进一步扩展和美化这个计算器，比如添加更多的数学功能、优化界面设计等。希望这个示例对你有所帮助，并能为你的项目开发提供参考。

js计算器的代码怎么打

一、HTML结构

二、CSS样式

三、JavaScript功能

四、总结

相关问答FAQs：