JS+CSS案例：实时获取人民币与美元汇率+CNY与USD互换+单位转换成万元和亿元的汇率计算器

本例图片

功能介绍

自动获取当前汇率，输入美元（USD）输出人民币（CNY），点击文本框后的货币单位，可以交换兑换比率。
自动处理数字输入：文本框允许直接粘帖科学计数法形式的数字（自动过滤空格,逗号及其他字符），如：2,923,706,026 或 2 923 706 026 这样的数字。
对转换后的以元为单位的数值进行单位换算，可以换算为万元和亿元为单位的两种数值。

需求发生：

目前正在做的一个电影网站，需要在页面前端把电影按票房金额排序。从海外网站获得的电影全球票房数据通常如下：

国内的网站获得的票房数据如下：

我需要将两个网站获得的数值单位统一转换为人民币，并获得以万元为单位的数值。这样才能在网站后端输入数值后，实现前端页面的排序。于是我就在网站后台增加了这样一个汇率计算器。

现在我将这个功能提出来，单独做个页面，分享给需要的人。

HTML代码

html 复制代码

<body>
<div class="box">
	<fieldset>
   	    <h2>CNY-USD 汇率计算器</h2> 
   	    <div class="rate">
		<em>当前汇率：</em><span  id="rate"></span> 
	    </div>
	    <div class="currency"> 	        
	        <input type="text" id="amountone" placeholder="0.00" value=""  oninput="convertToNumber(this);changeit();" /> 
	        <select id="currency-one"> 	            
	            <option value="USD" selected>USD</option>
	            <option value="CNY" >CNY</option> 
	        </select> 
	    </div> 
	    <div class="currency"> 	        
	        <input type="text" id="amounttwo" placeholder="0.00"  readonly /> 
	        <select id="currency-two"> 	            
	            <option value="CNY" selected>CNY</option> 
	            <option value="USD" >USD</option>	            
	        </select> 
	    </div>
	    <div class="currency">	    
		    <!--<button id="swap" onclick="changeit()">换算</button>-->
                <input type="text" id="spaResult" placeholder="0.00" readonly><span id="unit">单位</span>
	    </div>
	    <div>
		<button type="button" id="btn2" onclick="change()" value="亿元" />换算：亿元</button>	
		<button type="button" id="btn1" onclick="change()" value="万元" />换算：万元</button>	            				
	    </div>        
	</fieldset>
</div>
</body>

CSS样式

css 复制代码

<style type="text/css">
	/* Reset CSS  清除默认样式和浮动 */
*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}

html {
	margin: 0px !important;
	height: 100%;
}
body{
	height: 100%;
	font-size: 1.2rem;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,figure,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}

input {
	border: none;
	outline: none;
}


/* General Definitions  定义全局样式 */

:root {
    --bg-color:#999;
    --primary-color: #139ce4;
    --color:#fff;
    --second-color:#999999;
}

body {
	background: var(--bg-color);
	font-family: "微软雅黑",Helvetica,weiruanyahei,Tahoma,Arial,Sans-serif;
	color: #333;
}

/* ............................ 	Heading Define 定义<H>标签属性 */

input[type=text]{
    color: var(--primary-color);
	border:none;
	background: none;	
	border-bottom: 2px solid var(--primary-color);
	width: 75%;
	padding: 5px;
	text-align: right;
	padding-right: 10px;
	margin-right: 20px;
    font-size: 1.8rem;
}
input::placeholder {
  color: var(--primary-color); /* 你想要的颜色代码 */
}

h2{margin-bottom: 15px}

fieldset{
    border: 1px solid #d3d3d3;
    padding: 20px;
    margin: 10px;
    -moz-border-radius:  10px;  
    -webkit-border-radius: 10px;  
    border-radius:  10px;   /* future proofing */  
    -khtml-border-radius: 10px;  /* for old Konqueror browsers */   
    padding: 40px; 
    background: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
}

legend{
	font-size: 1rem;
	padding:0px 20px;
}
    
button{
  position: relative;   
  padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
  font-family: "微软雅黑", sans-serif;
  font-size: 1.5rem;  
  line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ 
  font-weight:700;
  color: var(--color);  /* 文字颜色为预定义的前景色 */
  cursor: pointer;   /* 鼠标移动到按钮上时候的形状：手型 */
  user-select: none;  /* 让用户不能选择按钮上的文字 */
  white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
  border-radius: 0.5rem; 
  text-decoration: none; 
  text-transform:uppercase; /* 字母自动修正为大写 */
  transition: all .1s; /* 按钮响应动画效果的持续时间 */
  margin: 1.5rem 0rem 1.5rem 2rem;
  background-color:var(--primary-color);
  border:none;
  float: right;
}
button:hover{
	background-color:var(--second-color);
}

button:active{
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
    box-shadow: inset 5px 5px 5px 0 rgba(0, 0, 0, .3);
}

.box{
  /* 居中 */
  position: fixed;  
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
  width:50%;
}

.currency{
	width: 100%;
	float: left;
    margin-bottom: 10px;
    text-align: right;
}
.currency select {
    padding: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;    
    font-size: 16px;
    background: #fff;
    cursor: pointer;
}
.currency option{
    font-size: 16px;
    display: block;
	border: none;
    padding: 10px;
}

.rate {
    color: var(--primary-color);
    font-size: 14px;
    padding: 0 10px;
    text-align: right;
    margin-bottom: 10px;
}
select:focus,
input:focus,
button:focus {
    outline: 0;
}
@media (max-width: 600px) {
    .currency input {
    width: 200px;
}
}

#amounttwo,
#spaResult{
    border-color:#999;
    color: #999;
    font-size: 1.2rem;
}
#amounttwo::placeholder,
#spaResult::placeholder {
    color: #999;
}

#unit{
    width: 60px;
    height: 36px;
    text-align: center;
    display: inline-block;
}
</style>

JS代码

javascript 复制代码

<script type="text/javascript">

// 当输入框点击时，清除转换后的数值
document.getElementById('amountone').addEventListener('click', function() {
    document.getElementById('spaResult').value = '0.00';
    //document.getElementById('amounttwo').value = '0.00';
});

// 转换货币单位
 function change() {
 	const clickedButtonId = event.target.id;
 	//alert(clickedButtonId);
    var strInput = document.all.amounttwo.value;  
    if (clickedButtonId =='btn1'){ 
    	change_unit = 10000;
    	document.getElementById("unit").innerHTML='万元';
    } else {
    	change_unit = 100000000; 
    	document.getElementById("unit").innerHTML='亿元';
    }
    if (strInput != "")
    {
        var numInput = parseFloat(strInput);
        var numOutput = (numInput/change_unit).toFixed(2)
        document.all.spaResult.value = numOutput;
    }
};

// 文本框允许直接粘帖科学计数法形式的数字（自动过滤空格,逗号及其他字符）
function convertToNumber(inputElement) {
    var value = inputElement.value;
    var numericValue = value.replace(/[^0-9]/g, '');
    var number = Number(numericValue);
    if (!isNaN(number)) {
        inputElement.value = number;
    }
}

// 汇率计算 

// 获取货币1对象
let currencyEl_one = document.getElementById("currency-one");
// 获取货币2对象
let currencyEl_two = document.getElementById("currency-two");
// 获取货币1对应的汇率对象
let amountEl_one = document.getElementById("amountone");
// 获取货币2对应的汇率对象
let amountEl_two = document.getElementById("amounttwo");
// 获取提示框对应的对象
let rateEl = document.getElementById("rate");
 
// 检查初始状态下 是否需要换算汇率
getData();
 
// 货币2发生变化时 触发的事件
currencyEl_two.onchange = getData;
 
// 货币1发生变化时 触发的事件
currencyEl_one.onchange = getData;
 
// 获取按钮 货币1和货币2是否都有值
let btn = document.getElementById("swap");
 
// 点击交换按钮时 触发的事件
function changeit() {
  // console.log("!!!");
  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);
    });
 
};
 
// 得到汇率
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); 
      });
}
// 汇率计算结束
</script>

大功告成

我个人是从设计师过渡到前端然后慢慢接触网站开发的，水平有限，所有代码仅供参考。

路过的朋友，帮忙点个免费的赞吧！谢谢啦！