原生JS实现汇率转换功能代码实例

下面我将详细讲解“原生JS实现汇率转换功能代码实例”的完整攻略。

一、前置知识

在学习原生JS实现汇率转换功能代码实例之前，需要掌握以下前置知识：

HTML基础
CSS基础
JavaScript基础（包括DOM操作、事件绑定等）

如果掌握了以上基础知识，那么就可以进入具体的代码实现了。

二、HTML结构

在实现汇率转换功能之前，我们需要先搭建页面结构。页面结构可以采用以下方式搭建：

<div class="converter">
  <h2>汇率转换器</h2>
  <div class="form-group">
    <label>金额：</label>
    <input type="text" class="amount-input" />
  </div>
  <div class="form-group">
    <label>原始货币：</label>
    <select class="from-currency">
      <option value="CNY">人民币</option>
      <option value="USD">美元</option>
      <option value="EUR">欧元</option>
    </select>
  </div>
  <div class="form-group">
    <label>目标货币：</label>
    <select class="to-currency">
      <option value="CNY">人民币</option>
      <option value="USD">美元</option>
      <option value="EUR" selected>欧元</option>
    </select>
  </div>
  <button class="convert-btn">转换</button>
  <div class="result"></div>
</div>

这里我们使用了一个converter容器来装载汇率转换器的所有内容，包括标题、表单、转换按钮和结果容器等。

三、CSS样式

在HTML结构搭建完成之后，我们需要为页面添加样式。样式可以采用以下方式添加：

.converter {
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
}

.converter h2 {
  margin-top: 0;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: inline-block;
  width: 80px;
}

.form-group select, .amount-input {
  width: 200px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
}

.convert-btn {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  text-align: center;
  background-color: #3498db;
  color: #fff;
  border: none;
  cursor: pointer;
}

.result {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

这里我们为converter容器添加了一些基本样式，并使用了Bootstrap中的表单样式。同时，为了让转换按钮更加美观，我们对其进行了自定义样式。

四、JavaScript逻辑

在页面结构和样式都准备好之后，我们需要开始编写JavaScript代码实现汇率转换功能。

1. 获取汇率数据

首先，我们需要获取汇率数据，这里我们使用了一个汇率 API，代码如下：

const exchangeRatesUrl = 'https://api.exchangeratesapi.io/latest';

async function getExchangeRates() {
  const response = await fetch(exchangeRatesUrl);
  const data = await response.json();
  return data.rates;
}

const rates = await getExchangeRates();

这里我们使用了fetch函数来获取汇率数据，getExchangeRates函数是一个异步函数，用于获取汇率数据，并返回rates对象，其中包含了各个货币之间的汇率信息。

2. 转换汇率

在获取了汇率数据之后，我们需要编写一个函数，用于将一个货币的金额转换成另一个货币的金额。

function convertCurrency(amount, fromCurrency, toCurrency) {
  const fromRate = rates[fromCurrency];
  const toRate = rates[toCurrency];
  return amount * (toRate / fromRate);
}

这里我们使用了rates对象来获取汇率信息，并使用传入的三个参数，将一个货币的金额转换成另一个货币的金额。

3. 处理表单提交事件

当用户填写完表单之后，我们需要处理表单的提交事件，将输入的金额转换成所选择的目标货币的金额，并将结果显示出来。

const amountInput = document.querySelector('.amount-input');
const fromCurrencySelect = document.querySelector('.from-currency');
const toCurrencySelect = document.querySelector('.to-currency');
const convertBtn = document.querySelector('.convert-btn');
const resultDiv = document.querySelector('.result');

convertBtn.addEventListener('click', () => {
  const amount = amountInput.value;
  const fromCurrency = fromCurrencySelect.value;
  const toCurrency = toCurrencySelect.value;
  const convertedAmount = convertCurrency(amount, fromCurrency, toCurrency);
  resultDiv.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
});

这里我们使用了querySelector函数来获取表单元素，并使用事件监听器addEventListener来监听转换按钮的点击事件。在点击转换按钮时，我们获取了输入的金额、原始货币和目标货币的选择，并使用convertCurrency函数将输入的金额转换成目标货币的金额。最后，我们将转换结果显示在结果容器中，格式为："X 原始货币 = Y 目标货币"。

五、完整示例

<!DOCTYPE html>
<html>
<head>
  <title>汇率转换器</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
  <style>
    .converter {
      width: 400px;
      padding: 20px;
      border: 1px solid #ccc;
    }

    .converter h2 {
      margin-top: 0;
    }

    .form-group {
      margin-bottom: 10px;
    }

    .form-group label {
      display: inline-block;
      width: 80px;
    }

    .form-group select, .amount-input {
      width: 200px;
      padding: 5px;
      font-size: 16px;
      border: 1px solid #ccc;
    }

    .convert-btn {
      display: block;
      width: 100%;
      padding: 10px;
      font-size: 16px;
      text-align: center;
      background-color: #3498db;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    .result {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <div class="converter">
      <h2>汇率转换器</h2>
      <div class="form-group">
        <label>金额：</label>
        <input type="text" class="amount-input" />
      </div>
      <div class="form-group">
        <label>原始货币：</label>
        <select class="from-currency">
          <option value="CNY">人民币</option>
          <option value="USD">美元</option>
          <option value="EUR">欧元</option>
        </select>
      </div>
      <div class="form-group">
        <label>目标货币：</label>
        <select class="to-currency">
          <option value="CNY">人民币</option>
          <option value="USD">美元</option>
          <option value="EUR" selected>欧元</option>
        </select>
      </div>
      <button class="convert-btn">转换</button>
      <div class="result"></div>
    </div>
  </div>

  <script>
    const exchangeRatesUrl = 'https://api.exchangeratesapi.io/latest';

    async function getExchangeRates() {
      const response = await fetch(exchangeRatesUrl);
      const data = await response.json();
      return data.rates;
    }

    function convertCurrency(amount, fromCurrency, toCurrency) {
      const fromRate = rates[fromCurrency];
      const toRate = rates[toCurrency];
      return amount * (toRate / fromRate);
    }

    const amountInput = document.querySelector('.amount-input');
    const fromCurrencySelect = document.querySelector('.from-currency');
    const toCurrencySelect = document.querySelector('.to-currency');
    const convertBtn = document.querySelector('.convert-btn');
    const resultDiv = document.querySelector('.result');

    convertBtn.addEventListener('click', async () => {
      const amount = amountInput.value;
      const fromCurrency = fromCurrencySelect.value;
      const toCurrency = toCurrencySelect.value;
      const rates = await getExchangeRates();
      const convertedAmount = convertCurrency(amount, fromCurrency, toCurrency);
      resultDiv.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
    });
  </script>
</body>
</html>

在以上示例中，我们使用了Bootstrap样式，通过JavaScript代码实现了汇率转换器的功能，并使用了汇率 API 来获得实时的汇率数据。

六、小结

通过以上攻略，我们详细讲解了实现汇率转换功能的完整过程。在这个过程中，我们使用了 HTML、CSS 和 JavaScript 等知识，以及通过汇率 API 来获取实时的汇率数据。最终，我们实现了一个简单的汇率转换器，能够让用户方便地进行货币的转换。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现汇率转换功能代码实例 - Python技术站