首页
所有分类
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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
JavaScript基础篇（3)之Object、Function等引用类型
Nov 30 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
javascript实现留言板功能
Feb 08 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
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
RestTemplate(1) Windows Server 2022(3) Quartz(1) calc(1) Windows Server(4) NTP(1) K8s(1) HttpClient(1) Hive(5) SandBox(1)
You might like
队列在编程中的实际应用(php)
2010/09/04 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
收藏一些不常用，但是有用的代码
2007/03/12 Javascript
关于this和self的使用说明
2010/08/01 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python和JavaScript哪个容易上手
2020/06/23 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
用python制作个视频下载器
2021/02/01 Python
英文翻译的自我评价语句
2013/10/04 职场文书
临床医学专业毕业生的自我评价
2013/10/17 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
音乐课外活动总结
2015/05/09 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书