极客教程JavaScript 货币转换器
在本文中，我们将实现一个简单的 货币转换器 ，将货币转换为其他任何国家的货币。
先决条件：
- 基本的HTML，CSS，JavaScript。
方法：
- 实现HTML代码，用于用户输入金额和两种货币。
- 选择货币， 转换 按钮显示转换后的金额。
- 重置 按钮重置数据。
- 使用JavaScript函数和自定义方法来实现货币转换，如addEventListener()。
- 在脚本文件中使用货币交换API。
HTML代码： 以下HTML代码实现了用户输入金额和需要进行转换的两种货币的GUI。在 index.html 中添加代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
<link rel="preconnect"
href=
"https://fonts.gstatic.com">
<link href=
"https://fonts.googleapis.com/css2?family=Amiri&family=Lobster&family=Pacifico&display=swap"
rel="stylesheet">
<!-- linking style.css file-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Currency Converter -->
<h1 class="heading text-center display-2">
Currency Converter
</h1>
<hr>
<div class="container">
<div class="main">
<div class="form-group">
<label for="oamount">
Amount to Convert :
</label>
<input type="text" class="form-control searchBox" placeholder="0.00" id="oamount">
</div>
<div class="row">
<div class="col-sm-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">From</span>
</div>
<select class="form-control from" id="sel1">
<option value="">Select One …</option>
<option value="USD">USD</option>
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MVR">MVR</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="UYU">UYU</option>
<option value="ZAR">ZAR</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">To</span>
</div>
<select class="form-control to" id="sel2">
<option value="">Select One …</option>
<option value="USD">USD</option>
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MVR">MVR</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="UYU">UYU</option>
<option value="ZAR">ZAR</option>
</select>
</div>
</div>
</div>
<div class="text-center">
<!-- convert button -->
<button class="btn btn-primary convert m-2" type="submit">
Convert
</button>
<!-- reset button -->
<button class="btn btn-primary m-2" onclick="clearVal()">
Reset
</button>
</div>
</div>
<div id="finalAmount" class="text-center">
<!-- Display the converted amount -->
<h2>Converted Amount :
<span class="finalValue" style="color:green;">
</span>
</h2>
</div>
</div>
<!-- linking script.js file -->
<script src="script.js"></script>
</body>
</html>
CSS代码： 以下是文件 “style.css”的内容。
body {
background-color: aliceblue;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.heading {
font-family: 'Pacifico', cursive;
margin: 35px auto 20px;
}
hr {
border-top: 2px solid black;
width: 40%;
margin-bottom: 55px;
}
.main {
width: 50vw;
margin: auto;
padding: 30px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
label {
font-size: 20px;
}
.btn {
width: 200px;
}
#finalAmount {
font-family: 'Lobster', cursive;
display: none;
margin: 50px auto;
}
#finalAmount h2 {
font-size: 50px;
}
.finalValue {
font-family: 'Amiri', serif;
}
@media (max-width: 768px) {
hr {
width: 60%;
}
.main {
width: 100%;
}
}
@media (max-width: 400px) {
.heading {
font-size: 60px;
}
hr {
width: 75%;
}
#finalAmount h2,
.finalValue {
font-size: 40px;
}
}
JavaScript代码： 以下是用于上述HTML代码的 script.js 文件的内容。
// Include api for currency change
const api = "https://api.exchangerate-api.com/v4/latest/USD";
// For selecting different controls
let search = document.querySelector(".searchBox");
let convert = document.querySelector(".convert");
let fromCurrecy = document.querySelector(".from");
let toCurrecy = document.querySelector(".to");
let finalValue = document.querySelector(".finalValue");
let finalAmount = document.getElementById("finalAmount");
let resultFrom;
let resultTo;
let searchValue;
// Event when currency is changed
fromCurrecy.addEventListener('change', (event) => {
resultFrom = `{event.target.value}`;
});
// Event when currency is changed
toCurrecy.addEventListener('change', (event) => {
resultTo = `{event.target.value}`;
});
search.addEventListener('input', updateValue);
// Function for updating value
function updateValue(e) {
searchValue = e.target.value;
}
// When user clicks, it calls function getresults
convert.addEventListener("click", getResults);
// Function getresults
function getResults() {
fetch(`${api}`)
.then(currency => {
return currency.json();
}).then(displayResults);
}
// Display results after conversion
function displayResults(currency) {
let fromRate = currency.rates[resultFrom];
let toRate = currency.rates[resultTo];
finalValue.innerHTML =
((toRate / fromRate) * searchValue).toFixed(2);
finalAmount.style.display = "block";
}
// When user click on reset button
function clearVal() {
window.location.reload();
document.getElementsByClassName("finalValue").innerHTML = "";
};
输出:
