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>

随机文章
Javascript知识点必读
最近更新