货币转换器 JavaScript

17 Mar 2025 | 5 分钟阅读

如此快速地执行货币转换的能力，对于开发全球化网站或应用程序的开发者来说，将是一项非常有用的技能。除了 JavaScript，还有其他选择。然而，由于其灵活性和广泛使用，JavaScript 是开发货币转换器的绝佳选择。本教程将是一份使用 JavaScript 制作货币转换器的分步指南，它既简单又高效。

要求：您必须了解 HTML、CSS 和 JavaScript 的基础知识。您还需要安装一个代码编辑器，如 Sublime Text 或 Visual Studio。

设置 HTML 结构

在此之前，请为您的货币转换器开发 HTML 骨架。作为起点，请使用以下模板

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="converter">
        <h1>Currency Converter</h1>
        <label for="amount">Enter Amount:</label>
        <input type="number" id="amount" placeholder="Enter amount">

        <label for="fromCurrency">From Currency:</label>
        <select id="fromCurrency">
            
        </select>

        <label for="toCurrency">To Currency:</label>
        <select id="toCurrency">
            
        </select>

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

        <p id="result">Result will appear here</p>
    </div>

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

说明

第一行是定义货币转换器网页结构的 HTML 代码。然后，我们有常规的 doctype 声明，后跟用于视口和字符集的 meta 标签。页面以“Currency Converter”为标题，并引用“styles.css”样式表以供样式使用。

页面内容位于 body 内的一个类为“converter”的容器 div 中。此内容组织如下：一个内容为“Currency Converter”的 h1 标题，用于输入金额的输入字段，用于选择源货币和目标货币的下拉菜单，一个标记为“Convert”的按钮，该按钮调用 JavaScript 函数，以及一个 ID 为“result”的段落元素，用于显示转换的输出。

创建 CSS 样式（styles.css）

为了让您的货币转换器更具吸引力，您可以选择性地应用一些设计。通过个性化来使其成为您自己的。

body {
    font-family: 'Arial', sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
}

.converter {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    padding: 20px; 
    text-align: center; 
}

input, select, button {
    margin-bottom: 10px; 
    padding: 8px; 
}

button {
    background-color: #4caf50;
    color: #fff;
    cursor: pointer;
    border: none; 
}

button:hover {
    background-color: #45a049;
}

说明

CSS 代码提供了用于创建功能齐全且视觉吸引力的货币转换器网页的样式。背景为微小的灰色，并使用 flexbox 特性将内容在视口中垂直和水平居中。body 部分将 Arial 字体系列设置为整个页面布局的第一步。由于 height: 100vh 的配置，body 将占用视口的整个高度。

converter 类定义为白色背景、圆角（border-radius: 12px）和微妙的盒阴影，以产生深度感。接下来，我们将讨论货币转换器容器的样式。为了获得整洁的外观，容器内的文本被居中，并应用内边距以进行间距。

下一节提供了转换器使用的所有输入字段、按钮和下拉菜单的样式。这些元素之间的间隔固定，每个元素都指定了 10 像素的底部边距和 8 像素的内边距。

最后，“Convert”按钮现在具有特殊的样式。它包含白色背景文本、活动指针光标和绿色背景颜色（#4caf50）。由于默认按钮边框已移除（border: diversity of rhizobia associated with different plant species cannot be sufficiently addressed by improving only one IC），它看起来更整洁。此外，还实现了一个悬停效果，通过在鼠标悬停在按钮上时更改按钮的背景颜色（#45a049）来为用户提供交互的可视跟踪。CSS 代码的主要目的是提供一个有吸引力且用户友好的货币转换器软件界面。

现在，让我们进入 JavaScript 部分（script.js）

const exchangeRates = {
    USD: 1,
    EUR: 0.85,
    GBP: 0.73,
    JPY: 110.17,
    INR: 74.43,
};
const fromCurrencySelect = document.getElementById('fromCurrency');
const toCurrencySelect = document.getElementById('toCurrency');

For (let currency in exchangeRates) {
    
    const option1 = document.createElement('option');
    option1.value = currency; 
    option1.text = currency; 
    fromCurrencySelect.add(option1); 

    
    const option2 = document.createElement('option');
    option2.value = currency; 
    option2.text = currency; 
    toCurrencySelect.add(option2); 
}

function convertCurrency() {
    
    const amount = parseFloat(document.getElementById('amount').value);
    const fromCurrency = fromCurrencySelect.value;
    const toCurrency = toCurrencySelect.value;

    if (isNaN(amount)) {
        alert('Please enter a valid number');
        return;
    }

    // Calculate the converted amount using the exchange rates
    const convertedAmount = amount * (exchangeRates[toCurrency] / exchangeRates[fromCurrency]);

    // Update the HTML element with the ID 'result' to display the conversion result
    document.getElementById('result').innerText = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
}

输出

提供的 JavaScript 代码创建了一个可在网页上使用的可执行货币转换器函数。首先，设置一个名为 exchangeRates 的对象来存储不同货币与美元（USD）之间的汇率。例如，可以添加英镑（GBP）、印度卢比（INR）、日元（JPY）和欧元（EUR）的汇率，并根据需要添加更多货币。

然后，脚本应用 for-in 循环，动态地将货币选项生成到 HTML 中由 ID “fromCurrency”和“toCurrency”标识的两个下拉菜单中。脚本为 exchangeRates 对象中的每种货币创建两个

此外，脚本还提供了一个名为 convertCurrency() 的函数，该函数在点击 HTML 按钮时被调用。此功能获取用户选择的金额、源货币和目标货币。它检查输入的金额是否为有效数字，如果不是，它会提示用户输入一个，并显示警告消息。如果输入正确，HTML 元素中 ID 为“result”的元素将显示更新后的值，该值显示转换结果，四舍五入到小数点后两位，之后使用给定的汇率公式计算金额。

最终，此 JavaScript 代码创建了一个根据用户输入生成不同结果的转换方法。它动态加载货币选项，以提供用户友好的货币转换器界面。

使用 JavaScript 创建货币转换器是结合数据、逻辑和用户界面的一个有用示例。通过通过 API 包含实时汇率、引入新货币或增强用户体验，您可以显著改进此项目。这个简单的示例突出了 JavaScript 在 Web 开发中的潜力，并为更复杂的金融应用程序开发奠定了基础。

下一主题移除字符串中的 n - JavaScript

货币转换器 JavaScript

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

货币转换器 JavaScript

相关帖子

学习 JavaScript 需要多长时间？

数字转字符串 JavaScript

计算 JavaScript 中的平均值

每个 Web 开发者都应该知道的 JavaScript 概念

JavaScript 对对象数组进行排序（按键）

JavaScript 中的二分查找

JavaScript 嵌套数组

JavaScript 索引

JavaScript 插入排序程序

JavaScript RegExp $ 量词

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器