js汇率计算器系统
时间:2022-07-28
本文章向大家介绍js汇率计算器系统，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
html部分:
<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>html部分:
<div class="rate" id="rate"></div>代表
<input type="number" id="amount-two" placeholder="0" />代表
<button class="btn" id="swap">
交换
</button><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>。。。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里面的<div class="container"></div>
弹性布局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>
- tensorflow之tf.placeholder 与 tf.Variable区别对比
- 11g备库搭建碰到自己给自己埋的坑(r7笔记第63天)
- JDBC基础入门（2）
- 11g备库无法开启ADG的原因分析 (r7笔记第62天)
- JDBC基础入门（3）
- Python多元线性回归-sklearn.linear_model，并对其预测结果评估
- python 聚类分析实战案例:K-means算法(原理源码)
- JAVA面试题解惑——final、finally和finalize的区别
- Java内存管理
- python基础知识——内置数据结构(字典)
- mysql、mongodb、python(dataframe).聚合函数的形式，以及报错解决方案
- JavaScript计算水仙花数【可自定义范围】
- JSP简单入门（1）
- mongodb取出json，利用python转成dataframe（dict-to-dataframe）
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 蓝桥杯 试题 基础练习 龟兔赛跑预测
- 问题 1432: [蓝桥杯][2013年第四届真题]剪格子
- 问题 1426: [蓝桥杯][历届试题]九宫重排
- mock测试及jacoco覆盖率
- HDU 1495 非常可乐 最简单的的解决方案
- Performing Push Install adb: error: failed to get feature set: more than one 解决方案
- Shell Style Guide
- 10分钟搞定OAuth2.0授权服务
- IP 地址大解密
- 曾经，我以为我很懂MySQL索引
- AES加解密工具类AESUtil记录
- iOS逆向之使用unc0ver越狱 iOS13.5
- Spring @Autowired npe example：Why your Spring @Autowired component is null
- Spring JPA 查询创建
- 『Python动手学』Python处理.mat文件