1. PingCode智库首页
  2. 百科

js怎么做三个计算器

Edit1 • • 百科

js怎么做三个计算器

如何在JavaScript中创建三个计算器

使用JavaScript创建三个计算器的方法包括：创建简单计算器、创建科学计算器、创建货币转换计算器。

详细展开： 创建一个简单的计算器是最基础的任务，它可以帮助我们理解基本的JavaScript操作和DOM操作。我们将通过创建一个简单的计算器来逐步解释如何实现其他类型的计算器。

一、创建简单计算器

1. 用户界面设计

首先，我们需要创建一个简单的HTML界面，使用户能够输入数字并选择操作。下面是一个简单的HTML示例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Simple Calculator</title>


</head>


<body>


    <div id="calculator">


        <input type="text" id="display" disabled>


        <div>


            <button onclick="appendNumber(1)">1</button>


            <button onclick="appendNumber(2)">2</button>


            <button onclick="appendNumber(3)">3</button>


            <button onclick="setOperation('+')">+</button>


        </div>


        <div>


            <button onclick="appendNumber(4)">4</button>


            <button onclick="appendNumber(5)">5</button>


            <button onclick="appendNumber(6)">6</button>


            <button onclick="setOperation('-')">-</button>


        </div>


        <div>


            <button onclick="appendNumber(7)">7</button>


            <button onclick="appendNumber(8)">8</button>


            <button onclick="appendNumber(9)">9</button>


            <button onclick="setOperation('*')">*</button>


        </div>


        <div>


            <button onclick="appendNumber(0)">0</button>


            <button onclick="clearDisplay()">C</button>


            <button onclick="calculate()">=</button>


            <button onclick="setOperation('/')">/</button>


        </div>


    </div>


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


</body>


</html>

2. JavaScript逻辑

接下来，我们需要编写JavaScript代码来处理用户输入并执行计算。我们可以将所有功能放在一个单独的文件calculator.js中。

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


let currentOperation = null;


let firstOperand = null;


function appendNumber(number) {


    display.value += number;


}


function setOperation(operation) {


    firstOperand = parseFloat(display.value);


    currentOperation = operation;


    display.value = '';


}


function clearDisplay() {


    display.value = '';


    currentOperation = null;


    firstOperand = null;


}


function calculate() {


    let secondOperand = parseFloat(display.value);


    let result;


    switch (currentOperation) {


        case '+':


            result = firstOperand + secondOperand;


            break;


        case '-':


            result = firstOperand - secondOperand;


            break;


        case '*':


            result = firstOperand * secondOperand;


            break;


        case '/':


            result = firstOperand / secondOperand;


            break;


        default:


            return;


    }


    display.value = result;


    currentOperation = null;


    firstOperand = null;


}

二、创建科学计算器

1. 扩展用户界面

科学计算器需要更多的功能按钮，例如平方根、幂次方和三角函数。我们需要在HTML中添加这些按钮。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Scientific Calculator</title>


</head>


<body>


    <div id="calculator">


        <input type="text" id="display" disabled>


        <div>


            <button onclick="appendNumber(1)">1</button>


            <button onclick="appendNumber(2)">2</button>


            <button onclick="appendNumber(3)">3</button>


            <button onclick="setOperation('+')">+</button>


            <button onclick="calculateSquareRoot()">√</button>


        </div>


        <div>


            <button onclick="appendNumber(4)">4</button>


            <button onclick="appendNumber(5)">5</button>


            <button onclick="appendNumber(6)">6</button>


            <button onclick="setOperation('-')">-</button>


            <button onclick="calculatePower()">^</button>


        </div>


        <div>


            <button onclick="appendNumber(7)">7</button>


            <button onclick="appendNumber(8)">8</button>


            <button onclick="appendNumber(9)">9</button>


            <button onclick="setOperation('*')">*</button>


            <button onclick="calculateSin()">sin</button>


        </div>


        <div>


            <button onclick="appendNumber(0)">0</button>


            <button onclick="clearDisplay()">C</button>


            <button onclick="calculate()">=</button>


            <button onclick="setOperation('/')">/</button>


            <button onclick="calculateCos()">cos</button>


        </div>


    </div>


    <script src="scientific_calculator.js"></script>


</body>


</html>

2. JavaScript逻辑扩展

在scientific_calculator.js中，我们需要扩展之前的逻辑以包括新功能。

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


let currentOperation = null;


let firstOperand = null;


function appendNumber(number) {


    display.value += number;


}


function setOperation(operation) {


    firstOperand = parseFloat(display.value);


    currentOperation = operation;


    display.value = '';


}


function clearDisplay() {


    display.value = '';


    currentOperation = null;


    firstOperand = null;


}


function calculate() {


    let secondOperand = parseFloat(display.value);


    let result;


    switch (currentOperation) {


        case '+':


            result = firstOperand + secondOperand;


            break;


        case '-':


            result = firstOperand - secondOperand;


            break;


        case '*':


            result = firstOperand * secondOperand;


            break;


        case '/':


            result = firstOperand / secondOperand;


            break;


        case '^':


            result = Math.pow(firstOperand, secondOperand);


            break;


        default:


            return;


    }


    display.value = result;


    currentOperation = null;


    firstOperand = null;


}


function calculateSquareRoot() {


    let value = parseFloat(display.value);


    display.value = Math.sqrt(value);


}


function calculatePower() {


    firstOperand = parseFloat(display.value);


    currentOperation = '^';


    display.value = '';


}


function calculateSin() {


    let value = parseFloat(display.value);


    display.value = Math.sin(value);


}


function calculateCos() {


    let value = parseFloat(display.value);


    display.value = Math.cos(value);


}

三、创建货币转换计算器

1. 用户界面设计

货币转换计算器需要一个输入框用于输入金额，两个下拉菜单用于选择货币类型，并一个按钮执行转换。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Currency Converter</title>


</head>


<body>


    <div id="currency-converter">


        <input type="text" id="amount" placeholder="Enter amount">


        <select id="from-currency">


            <option value="USD">USD</option>


            <option value="EUR">EUR</option>


            <option value="GBP">GBP</option>


        </select>


        <select id="to-currency">


            <option value="USD">USD</option>


            <option value="EUR">EUR</option>


            <option value="GBP">GBP</option>


        </select>


        <button onclick="convertCurrency()">Convert</button>


        <p id="result"></p>


    </div>


    <script src="currency_converter.js"></script>


</body>


</html>

2. JavaScript逻辑

在currency_converter.js中，我们需要编写代码来执行货币转换。我们可以使用固定的汇率进行演示。

const rates = {


    USD: {


        EUR: 0.85,


        GBP: 0.75


    },


    EUR: {


        USD: 1.18,


        GBP: 0.88


    },


    GBP: {


        USD: 1.33,


        EUR: 1.14


    }


};


function convertCurrency() {


    let amount = parseFloat(document.getElementById('amount').value);


    let fromCurrency = document.getElementById('from-currency').value;


    let toCurrency = document.getElementById('to-currency').value;


    if (fromCurrency === toCurrency) {


        document.getElementById('result').innerText = `Converted amount: ${amount} ${toCurrency}`;


        return;


    }


    let conversionRate = rates[fromCurrency][toCurrency];


    let convertedAmount = amount * conversionRate;


    document.getElementById('result').innerText = `Converted amount: ${convertedAmount.toFixed(2)} ${toCurrency}`;


}

总结

通过以上步骤，我们已经成功创建了三个不同类型的计算器：简单计算器、科学计算器和货币转换计算器。每个计算器都展示了不同的JavaScript功能和应用场景。通过这些例子，你可以进一步扩展和自定义这些计算器，以满足更复杂的需求。

相关问答FAQs：

1. 这个计算器可以支持哪些基本运算？
这个计算器可以支持加法、减法、乘法和除法这四种基本运算。

2. 如何在网页中嵌入计算器？
要在网页中嵌入计算器，您可以使用JavaScript来创建一个计算器的HTML元素，并使用CSS样式进行美化。然后，将这个计算器元素插入到您想要展示计算器的位置。

3. 如何实现计算器的按键功能？
要实现计算器的按键功能，您可以使用JavaScript的事件监听器，为每个按钮添加一个点击事件。当用户点击按钮时，JavaScript代码将根据按钮的值执行相应的计算操作，并更新显示结果的区域。这样，用户就可以通过点击按钮来输入数字和操作符，然后得到计算结果。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3704760

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部