如何在 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