js汇率计算器系统

其他 2020-10-17 18:07:54 阅读次数: 0 
<!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>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37805832/article/details/109128313
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022