<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0px;margin: 0px;}
:root
{
--primary-color:#5fbaa7;
}
body
{
background-color: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
}
h1
{
color: var(--primary-color);
}
p
{
text-align: center;
}
.btn
{
color: #fff;
background-color: var(--primary-color);
cursor: pointer;
border-radius: 5px;
padding: 5px 12px;
font-size: 12px;
}
.money-img {
width: 150px;
}
.currency
{
padding: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.currency select {
padding: 10px 20px 10px 10px;
border: 1px solid #dedede;
font-size: 16px;
appearance: none;/*加了这一句后button和div一样了.button本来的功能没用。*/
background-color: transparent;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");/*新图片,缺点:重复 宽高大 在左上角*/
background-position: right 10px top 50%; /*距离右边10px,距离top50%*/
background-size: 12px,12px;/*xy都12px*/
background-repeat: no-repeat;/*不重复*/
}
.currency input {
border: 0;
background-color: transparent;
font-size: 30px;
text-align: right;
}
.swap-rate-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.rate
{
color: var(--primary-color);
font-size: 14px;
padding: 0 10px;
}
select:focus,
input:focus,
button:focus {
outline: 0;
}
@media (max-width: 600px) {
.currency input {
width: 200px;
}
}
</style>
</head>
<body>
<img src="img/money.png" alt="" class="money-img">
<h1>汇率计算器</h1>
<p>选择货币单位获取汇率</p>
<div class="container">
<div class="currency">
<select id="currency-one">
<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">白俄罗斯卢布BYR</option>
<option value="CNY" selected>人民币CNY</option>
<option value="DKK">丹麦克朗DKK</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="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="USD">美元USD</option>
<option value="UYU">乌拉圭比索UYU</option>
<option value="VND">越南盾VND</option>
<option value="ZAR">南非兰特ZAR</option>
</select>
<input type="number" id="amount-one" placeholder="0" value="1" />
</div>
<div class="swap-rate-container">
<button class="btn" id="swap">
交换
</button>
<div class="rate" id="rate"></div>
</div>
<div class="currency">
<select id="currency-two">
<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">白俄罗斯卢布BYR</option>
<option value="CNY">人民币CNY</option>
<option value="DKK">丹麦克朗DKK</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="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="USD" selected>美元USD</option>
<option value="UYU">乌拉圭比索UYU</option>
<option value="VND">越南盾VND</option>
<option value="ZAR">南非兰特ZAR</option>
</select>
<input type="number" id="amount-two" placeholder="0" >
</div>
</div>
<script type="text/javascript">
// 获取节点
const currencyEl_one = document.getElementById("currency-one");
const amountEl_one = document.getElementById("amount-one");
const currencyEl_two = document.getElementById("currency-two");
const amountEl_two = document.getElementById("amount-two");
const swap = document.getElementById("swap");
const rateEl = document.getElementById("rate");
// 通过fetch获取汇率并实现dom更新
function calculate() {
const currency_one = currencyEl_one.value;//获取到是什么交换
const currency_two = currencyEl_two.value;//什么
fetch(`https://api.exchangerate-api.com/v4/latest/${
currency_one}`).then(res=>res.json()).then(data=>
/*下载数据,然后转换为json数据,然后是把数据赋值给*/
{
const rate = data.rates[currency_two];
/*rates就是api里面的数组.意思是1块钱人民币转换成rates[currency_two]数组里面的值是多少.*/
rateEl.innerText=`1${
currency_one}=${
rate}${
currency_two}`;//1CNY = 0.317255FJD.ratee就是转换的利率
amountEl_two.value=(amountEl_one.value*rate).toFixed(2);//人民币比如20转换成美元就是20rate就是一块钱人民币转换成美元是多少。*起来就得出结果了。。
});/*汇率的api*/
}
currencyEl_one.addEventListener("change", calculate);//左上角的动西
amountEl_one.addEventListener("input", calculate);//右上角的东西
currencyEl_two.addEventListener("change", calculate);//左下角的东西
amountEl_two.addEventListener("input", calculate);//右下角的东西
swap.addEventListener("click", () => {
const temp = currencyEl_one.value;
currencyEl_one.value = currencyEl_two.value;
currencyEl_two.value = temp;
calculate();//刷新把.
});//交换的按钮,按下第二次就是美元兑换成人民币是多少。
</script>
</body>
</html>
js汇率计算器系统
猜你喜欢
转载自blog.csdn.net/qq_37805832/article/details/109128313
今日推荐
周排行