如何在 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+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始
广告

© . All rights reserved.