如何在 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 的貨幣轉換器。

更新於: 2022 年 6 月 24 日

9K+ 瀏覽量

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告