html部分:
"img/money.png" alt="" class="money-img" /> 汇率计算器
选择货币单位获取汇率
"container">"currency">"currency-one">"AED">阿联酋迪拉姆AED"ARS">阿根廷比索ARS"AUD">澳元AUD"BGN">保加利亚列弗BGN"BRL">巴西雷亚尔BRL"BSD">白俄罗斯卢布BYR"CNY" selected>人民币CNY"DKK">丹麦克朗DKK"EGP">埃及镑EGP"EUR">欧元EUR"FJD">斐济美元FJD"GBP">英镑GBP"GTQ">危地马拉格查儿GTQ"HKD">港元HKD"HRK">克罗地亚库纳HRK"HUF">匈牙利福林HUF"IDR">印尼盾IDR"ILS">以色列新锡克尔ILS"INR">印度卢比INR"ISK">冰岛克朗ISK"JPY">日元JPY"KRW">韩元KRW"KZT">哈萨克斯坦坚强戈KZT"MXN">墨西哥比索MXN"MYR">马来西亚林吉特MYR"NOK">挪威克朗NOK"NZD">新西兰元NZD"PAB">巴拿马巴波亚PAB"PEN">秘鲁索尔PEN"PHP">菲律宾比索PHP"PKR">巴基斯坦卢比PKR"PLN">波兰兹罗提PLN"PYG">巴拉圭瓜拉尼PYG"RON">罗马尼亚新列伊RON"RUB">卢布RUB"SAR">沙特阿拉伯人里亚尔SAR"SEK">瑞典克朗SEK"SGD">新加坡元SGD"THB">泰铢THB"TRY">新土耳其里拉TRY"TWD">新台币TWD"UAH">乌克兰格里夫纳UAH"USD">美元USD"UYU">乌拉圭比索UYU"VND">越南盾VND"ZAR">南非兰特ZAR"number" id="amount-one" placeholder="0" value="1" />"swap-rate-container">"btn" id="swap"> 交换"rate" id="rate">"currency">"currency-two">"AED">阿联酋迪拉姆AED"ARS">阿根廷比索ARS"AUD">澳元AUD"BGN">保加利亚列弗BGN"BRL">巴西雷亚尔BRL"BSD">白俄罗斯卢布BYR"CNY">人民币CNY"DKK">丹麦克朗DKK"EGP">埃及镑EGP"EUR">欧元EUR"FJD">斐济美元FJD"GBP">英镑GBP"GTQ">危地马拉格查儿GTQ"HKD">港元HKD"HRK">克罗地亚库纳HRK"HUF">匈牙利福林HUF"IDR">印尼盾IDR"ILS">以色列新锡克尔ILS"INR">印度卢比INR"ISK">冰岛克朗ISK"JPY">日元JPY"KRW">韩元KRW"KZT">哈萨克斯坦坚强戈KZT"MXN">墨西哥比索MXN"MYR">马来西亚林吉特MYR"NOK">挪威克朗NOK"NZD">新西兰元NZD"PAB">巴拿马巴波亚PAB"PEN">秘鲁索尔PEN"PHP">菲律宾比索PHP"PKR">巴基斯坦卢比PKR"PLN">波兰兹罗提PLN"PYG">巴拉圭瓜拉尼PYG"RON">罗马尼亚新列伊RON"RUB">卢布RUB"SAR">沙特阿拉伯人里亚尔SAR"SEK">瑞典克朗SEK"SGD">新加坡元SGD"THB">泰铢THB"TRY">新土耳其里拉TRY"TWD">新台币TWD"UAH">乌克兰格里夫纳UAH"USD" selected>美元USD"UYU">乌拉圭比索UYU"VND">越南盾VND"ZAR">南非兰特ZAR"number" id="amount-two" placeholder="0" />
html部分:
"rate" id="rate">
代表
"number" id="amount-two" placeholder="0" />
代表
"btn" id="swap">
交换
"currency-one">"AED">阿联酋迪拉姆AED"ARS">阿根廷比索ARS"AUD">澳元AUD"BGN">保加利亚列弗BGN"BRL">巴西雷亚尔BRL"BSD">白俄罗斯卢布BYR"CNY" selected>人民币CNY。。。
css部分:
*{padding: 0px;margin: 0px;} :root { --primary-color:#5fbaa7; } body { 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; 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%; background-size: 12px,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; } }
css逻辑： 第一步：先清除掉系统默认的元素的padding与margin值. 第二步;定义css变量 第三步：再让body里面的 弹性布局display: flex;,主轴为yflex-direction: column;，意思就是垂直发排列,y轴居中justify-content: center;,x轴也居中align-items: center;，高度为100vh,height: 100vh;记住,默认弹性布局是水平排列的哈. 第四步： 使用css变量 第五步： 第六步; 图片的宽度为150px 第七步： 得经过修改哦. 上面的图片的缺点; :重复 宽高大 在左上角 下面改正：
background-position: right 10px top 50%; background-size: 12px,12px; background-repeat: no-repeat;
第九步：
.swap-rate-container
里面的东西flex布局,justify-content: space-between;这里的意思是在.swap-rate-container中除了button与.rate的部分.中间的全都是空格的。第十步; 消除border默认的颜色样式.效果; js部分：
// 获取节点 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>
js逻辑: 第一步: 先获取需要的节点. 获取 这六个。 第二步：再监听事件. 比如改变钱币种类时,
currencyEl_one.addEventListener("change", calculate);
改变页面上第一个input的值时,
amountEl_one.addEventListener("input", calculate);
改变钱币种类时,
currencyEl_two.addEventListener("change", calculate);
改变页面上第二个input的值时,
amountEl_two.addEventListener("input", calculate);
第一步:获取到两个input的值后赋值给currency_one与currency_two； 第二步:下载货币汇，下载完毕后然后都转换成对象json(),然后都转换成对象后, 第三步:然后是算出比如这样 意思是data第一个 在rates数组中的汇率.(rates中的是上面的图片对应的某一个国家的汇率.) 数组中的是下面的值. 意思是: 然后是交换.
swap.addEventListener("click", () => { const temp = currencyEl_one.value; currencyEl_one.value = currencyEl_two.value; currencyEl_two.value = temp; calculate(); });
交换代表了是什么与什么交换. 比如之前是人民币与美元. 按钮之后是美元和人民币.
