如何在 JavaScript 中创建货币转换器?
在本教程中,我们将讨论如何在 JavaScript 中创建货币转换器。我们将讨论创建此类转换器涉及的各个步骤。
什么是货币转换器?
货币转换器是一种帮助您将一种货币转换为另一种货币的工具。例如,如果您来自美国并且要前往欧洲旅行,则需要使用货币转换器将您的美元转换为欧元。
为什么使用 JavaScript 创建货币转换器?
JavaScript 是一种用途广泛的编程语言,可用于创建各种应用程序,包括基于 Web 的应用程序。在创建货币转换器方面,JavaScript 提供了许多优势,例如
易用性 − 与其他编程语言相比,JavaScript 相对易于学习和使用。这使其成为创建货币转换器应用程序的理想选择。
跨平台兼容性 − JavaScript 代码可以在不同的平台上执行,例如 Windows、Mac 和 Linux。这使得可以创建可在不同平台上使用的货币转换器。
流行度 − JavaScript 是世界上最流行的编程语言之一。这意味着有一个庞大的开发者社区可以根据需要提供支持和帮助。
示例 1
现在我们已经讨论了一些使用 JavaScript 创建货币转换器的理由,让我们看一下创建货币转换器的代码。
以下是完整的可运行代码。
<!doctype html>
<HTML>
<head>
<title>How to Create a Currency Converter in JavaScript</title>
</head>
<body>
<h1>Currency Converter</h1>
<p> Select Currency and enter Amount to convert.</p>
<form>
<label>From:</label>
<select id="from">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
</select>
<label>To:</label>
<select id="to">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
</select>
<label>Amount:</label>
<input type="text" id="amount" />
<button type="button" id="convert">Convert</button>
<p id="result"></p>
</form>
<script>
const convert = document.getElementById("convert");
const result = document.getElementById("result");
const from = document.getElementById("from");
const to = document.getElementById("to");
const amount = document.getElementById("amount");
convert.addEventListener("click", function() {
let fromCurrency = from.value;
let toCurrency = to.value;
let amt = amount.value;
fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`)
.then(response => {
return response.json();
})
.then(data => {
let rate = data.rates[toCurrency];
let total = rate * amt;
result.innerHTML = `${amt} ${fromCurrency} = ${total}
${toCurrency}`;
});
});
</script>
</body>
</html>在上面的代码中,我们创建了一个可以将 USD 转换为 EUR、GBP 和 INR 的货币转换器。
注意 − 您也可以轻松修改代码以支持其他货币。
结论
在 JavaScript 中创建货币转换器是一项相对简单的任务。您只需使用 JavaScript 编程语言创建基于 Web 的应用程序即可。您可以使用本教程中提供的代码创建可以将 USD 转换为 EUR、GBP 和 INR 的货币转换器。
广告
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP