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

三尺非寒  论坛元老 | 2024-8-10 18:02:40 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1035|帖子 1035|积分 3105

本例图片


功能先容



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

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

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

我需要将两个网站得到的数值单位同一转换为人民币，并得到以万元为单位的数值。这样才能在网站后端输入数值后，实现前端页面的排序。于是我就在网站后台增长了这样一个汇率计算器。
现在我将这个功能提出来，单独做个页面，分享给需要的人。
HTML代码

  1. <body>
  2. <div class="box">
  3.         <fieldset>
  4.                <h2>CNY-USD 汇率计算器</h2>
  5.                <div class="rate">
  6.                 <em>当前汇率：</em><span  id="rate"></span>
  7.             </div>
  8.             <div class="currency">                 
  9.                 <input type="text" id="amountone" placeholder="0.00" value=""  oninput="convertToNumber(this);changeit();" />
  10.                 <select id="currency-one">                    
  11.                     <option value="USD" selected>USD</option>
  12.                     <option value="CNY" >CNY</option>
  13.                 </select>
  14.             </div>
  15.             <div class="currency">                 
  16.                 <input type="text" id="amounttwo" placeholder="0.00"  readonly />
  17.                 <select id="currency-two">                    
  18.                     <option value="CNY" selected>CNY</option>
  19.                     <option value="USD" >USD</option>                   
  20.                 </select>
  21.             </div>
  22.             <div class="currency">            
  23.                     <!--<button id="swap" onclick="changeit()">换算</button>-->
  24.                 <input type="text" id="spaResult" placeholder="0.00" readonly><span id="unit">单位</span>
  25.             </div>
  26.             <div>
  27.                 <button type="button" id="btn2" onclick="change()" value="亿元" />换算：亿元</button>       
  28.                 <button type="button" id="btn1" onclick="change()" value="万元" />换算：万元</button>                                                   
  29.             </div>        
  30.         </fieldset>
  31. </div>
  32. </body>
复制代码
CSS样式
  1. <style type="text/css">
  2.         /* Reset CSS  清除默认样式和浮动 */
  3. *{
  4.         margin:0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7. }
  9. html {
  10.         margin: 0px !important;
  11.         height: 100%;
  12. }
  13. body{
  14.         height: 100%;
  15.         font-size: 1.2rem;
  16. }
  18. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,figure,fieldset,input,textarea,p,blockquote,th,td {
  19.         margin: 0;
  20.         padding: 0;
  21. }
  23. input {
  24.         border: none;
  25.         outline: none;
  26. }
  29. /* General Definitions  定义全局样式 */
  31. :root {
  32.     --bg-color:#999;
  33.     --primary-color: #139ce4;
  34.     --color:#fff;
  35.     --second-color:#999999;
  36. }
  38. body {
  39.         background: var(--bg-color);
  40.         font-family: "微软雅黑",Helvetica,weiruanyahei,Tahoma,Arial,Sans-serif;
  41.         color: #333;
  42. }
  44. /* ............................         Heading Define 定义<H>标签属性 */
  46. input[type=text]{
  47.     color: var(--primary-color);
  48.         border:none;
  49.         background: none;       
  50.         border-bottom: 2px solid var(--primary-color);
  51.         width: 75%;
  52.         padding: 5px;
  53.         text-align: right;
  54.         padding-right: 10px;
  55.         margin-right: 20px;
  56.     font-size: 1.8rem;
  57. }
  58. input::placeholder {
  59.   color: var(--primary-color); /* 你想要的颜色代码 */
  60. }
  62. h2{margin-bottom: 15px}
  64. fieldset{
  65.     border: 1px solid #d3d3d3;
  66.     padding: 20px;
  67.     margin: 10px;
  68.     -moz-border-radius:  10px;  
  69.     -webkit-border-radius: 10px;  
  70.     border-radius:  10px;   /* future proofing */  
  71.     -khtml-border-radius: 10px;  /* for old Konqueror browsers */   
  72.     padding: 40px;
  73.     background: #fff;
  74.     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
  75. }
  77. legend{
  78.         font-size: 1rem;
  79.         padding:0px 20px;
  80. }
  81.    
  82. button{
  83.   position: relative;   
  84.   padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */
  85.   font-family: "微软雅黑", sans-serif;
  86.   font-size: 1.5rem;  
  87.   line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */
  88.   font-weight:700;
  89.   color: var(--color);  /* 文字颜色为预定义的前景色 */
  90.   cursor: pointer;   /* 鼠标移动到按钮上时候的形状：手型 */
  91.   user-select: none;  /* 让用户不能选择按钮上的文字 */
  92.   white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */
  93.   border-radius: 0.5rem;
  94.   text-decoration: none;
  95.   text-transform:uppercase; /* 字母自动修正为大写 */
  96.   transition: all .1s; /* 按钮响应动画效果的持续时间 */
  97.   margin: 1.5rem 0rem 1.5rem 2rem;
  98.   background-color:var(--primary-color);
  99.   border:none;
  100.   float: right;
  101. }
  102. button:hover{
  103.         background-color:var(--second-color);
  104. }
  106. button:active{
  107.     text-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
  108.     box-shadow: inset 5px 5px 5px 0 rgba(0, 0, 0, .3);
  109. }
  111. .box{
  112.   /* 居中 */
  113.   position: fixed;  
  114.   left: 50%;
  115.   top: 50%;
  116.   transform: translate(-50%, -50%);
  117.   width:50%;
  118. }
  120. .currency{
  121.         width: 100%;
  122.         float: left;
  123.     margin-bottom: 10px;
  124.     text-align: right;
  125. }
  126. .currency select {
  127.     padding: 10px;
  128.     -moz-appearance: none;
  129.     -webkit-appearance: none;
  130.     appearance: none;   
  131.     font-size: 16px;
  132.     background: #fff;
  133.     cursor: pointer;
  134. }
  135. .currency option{
  136.     font-size: 16px;
  137.     display: block;
  138.         border: none;
  139.     padding: 10px;
  140. }
  142. .rate {
  143.     color: var(--primary-color);
  144.     font-size: 14px;
  145.     padding: 0 10px;
  146.     text-align: right;
  147.     margin-bottom: 10px;
  148. }
  149. select:focus,
  150. input:focus,
  151. button:focus {
  152.     outline: 0;
  153. }
  154. @media (max-width: 600px) {
  155.     .currency input {
  156.     width: 200px;
  157. }
  158. }
  160. #amounttwo,
  161. #spaResult{
  162.     border-color:#999;
  163.     color: #999;
  164.     font-size: 1.2rem;
  165. }
  166. #amounttwo::placeholder,
  167. #spaResult::placeholder {
  168.     color: #999;
  169. }
  171. #unit{
  172.     width: 60px;
  173.     height: 36px;
  174.     text-align: center;
  175.     display: inline-block;
  176. }
  177. </style>
复制代码
JS代码
  1. <script type="text/javascript">
  3. // 当输入框点击时，清除转换后的数值
  4. document.getElementById('amountone').addEventListener('click', function() {
  5.     document.getElementById('spaResult').value = '0.00';
  6.     //document.getElementById('amounttwo').value = '0.00';
  7. });
  9. // 转换货币单位
  10. function change() {
  11.         const clickedButtonId = event.target.id;
  12.         //alert(clickedButtonId);
  13.     var strInput = document.all.amounttwo.value;  
  14.     if (clickedButtonId =='btn1'){
  15.             change_unit = 10000;
  16.             document.getElementById("unit").innerHTML='万元';
  17.     } else {
  18.             change_unit = 100000000;
  19.             document.getElementById("unit").innerHTML='亿元';
  20.     }
  21.     if (strInput != "")
  22.     {
  23.         var numInput = parseFloat(strInput);
  24.         var numOutput = (numInput/change_unit).toFixed(2)
  25.         document.all.spaResult.value = numOutput;
  26.     }
  27. };
  29. // 文本框允许直接粘帖科学计数法形式的数字（自动过滤空格,逗号及其他字符）
  30. function convertToNumber(inputElement) {
  31.     var value = inputElement.value;
  32.     var numericValue = value.replace(/[^0-9]/g, '');
  33.     var number = Number(numericValue);
  34.     if (!isNaN(number)) {
  35.         inputElement.value = number;
  36.     }
  37. }
  39. // 汇率计算
  41. // 获取货币1对象
  42. let currencyEl_one = document.getElementById("currency-one");
  43. // 获取货币2对象
  44. let currencyEl_two = document.getElementById("currency-two");
  45. // 获取货币1对应的汇率对象
  46. let amountEl_one = document.getElementById("amountone");
  47. // 获取货币2对应的汇率对象
  48. let amountEl_two = document.getElementById("amounttwo");
  49. // 获取提示框对应的对象
  50. let rateEl = document.getElementById("rate");
  52. // 检查初始状态下 是否需要换算汇率
  53. getData();
  55. // 货币2发生变化时 触发的事件
  56. currencyEl_two.onchange = getData;
  58. // 货币1发生变化时 触发的事件
  59. currencyEl_one.onchange = getData;
  61. // 获取按钮 货币1和货币2是否都有值
  62. let btn = document.getElementById("swap");
  64. // 点击交换按钮时 触发的事件
  65. function changeit() {
  66.   // console.log("!!!");
  67.   let currency_one = currencyEl_one.value;
  68.   let currency_two = currencyEl_two.value;
  70.   fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
  71.     .then(res => res.json())
  72.     .then(data => {
  73.       const rate = data.rates[currency_two];
  74.       rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;
  75.       amountEl_two.value = (amountEl_one.value * rate).toFixed(2);
  76.     });
  78. };
  80. // 得到汇率
  81. function getData() {
  82.     let currency_one = currencyEl_one.value;
  83.     let currency_two = currencyEl_two.value;
  84.     fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
  85.       .then(res => res.json())
  86.       .then(data => {
  87.         const rate = data.rates[currency_two];
  88.         rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;
  89.         amountEl_two.value = (amountEl_one.value * rate).toFixed(2);
  90.       });
  91. }
  92. // 汇率计算结束
  93. </script>
复制代码
大功告成

我个人是从计划师过渡到前端然后慢慢接触网站开发的，水平有限，所有代码仅供参考。
路过的朋侪，资助点个免费的赞吧！谢谢啦！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

三尺非寒

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表