首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 13, 2020

代码如下

html代码

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Exchange Rate Calculator</title> <link rel="stylesheet" href="style.css" rel="external nofollow" />
</head>
<body>
<img src="money.png" alt="" class="money-img" />
<h1>Exchange Rate Calculator</h1>
<p>Choose the currency and the amounts to get the exchange rate</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">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="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-one" placeholder="0" value="1" /> </div> <div class="swap-rate-container"> <button class="btn" id="swap"> 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">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" selected>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-two" placeholder="0" /> </div>
</div>
<script src="script.js"></script>
</body>
</html>

css代码

:root {
	--primary-color: #5fbaa7;
}
* {
	box-sizing: border-box;
}
body {
	background-color: #f4f4f4;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
	padding: 20px;
}
h1 {
	color: var(--primary-color);
}
p {
	text-align: center;
}
.btn {
	color: #fff;
	background: var(--primary-color);
	cursor: pointer;
	border-radius: 5px;
	font-size: 12px;
	padding: 5px 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;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #dedede;
	font-size: 16px;
	background: 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%2229 2.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%, 0, 0;
	background-size: 12px auto, 100%;
	background-repeat: no-repeat;
}
.currency input {
	border: 0;
	background: 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;
}
}

JavaScript代码

// 获取货币1对象
let currencyEl_one = document.getElementById("currency-one");
// 获取货币2对象
let currencyEl_two = document.getElementById("currency-two");
// 获取货币1对应的汇率对象
let amountEl_one = document.getElementById("amount-one");
// 获取货币2对应的汇率对象
let amountEl_two = document.getElementById("amount-two");
// 获取提示框对应的对象
let rateEl = document.getElementById("rate");

// 检查初始状态下 是否需要换算汇率
getData();

// 货币2发生变化时 触发的事件
currencyEl_two.onchange = getData;

// 货币1发生变化时 触发的事件
currencyEl_one.onchange = getData;

// 获取按钮 货币1和货币2是否都有值
let btn = document.getElementById("swap");

// 点击交换按钮时 触发的事件
btn.onclick = function() {
  // console.log("!!!");
  let currency_one = currencyEl_one.value;
  let currency_two = currencyEl_two.value;
  // 定义临时变量
  let temp = currency_one;
  // 交换货币1和货币2的value
  currencyEl_one.value = currency_two;
  currencyEl_two.value = temp;
  // 并且交换货币1和货币2对应的汇率
  currency_one = currency_two;
  currency_two = temp;

  fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
    .then(res => res.json())
    .then(data => {
      const rate = data.rates[currency_two];
      rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;
      amountEl_two.value = (amountEl_one.value * rate).toFixed(2);
    });

};

// 得到汇率
function getData() {
    let currency_one = currencyEl_one.value;
    let currency_two = currencyEl_two.value;
    fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
      .then(res => res.json())
      .then(data => {
        const rate = data.rates[currency_two];
        rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;
        amountEl_two.value = (amountEl_one.value * rate).toFixed(2);

      });
}

运行效果

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

陈太浪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JavaScript Tab菜单实现过程解析
May 13 #Javascript
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
element中el-container容器与div布局区分详解
May 13 #Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 #Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 #Javascript
Node 模块原理与用法详解
May 13 #Javascript
JavaScript oncopy事件用法实例解析
May 13 #Javascript
AGC(1) 原神(1) ICF-903L(1) 大话西游(1) 死亡搁浅(1) BCLer(1) YB-230(1) 74HC4066(1) AN-LP1(1) FS1016(1)
You might like
超神学院：天使彦公认最美的三个视角，网友：我的天使快下凡吧！
2020/03/02 国漫
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php app支付宝回调（异步通知）详解
2018/07/25 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21：详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
实例说明Python中比较运算符的使用
2015/05/13 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python决策树之C4.5算法详解
2017/12/20 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
建筑设计所实习生自我鉴定
2013/09/25 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
鼓励运动员的广播稿
2014/02/08 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS