AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js逐步教你实现原生汇率计算器系统(html逻辑 css逻辑 js逻辑)

2022-06-21 472
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： js逐步教你实现原生汇率计算器系统(html逻辑 css逻辑 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>

js逻辑:
第一步:
先获取需要的节点.
获取在这里插入图片描述
这六个。
第二步：再监听事件.
比如改变钱币种类时,

currencyEl_one.addEventListener("change", calculate);

改变页面上第一个input的值时,

amountEl_one.addEventListener("input", calculate);

改变钱币种类时,

currencyEl_two.addEventListener("change", calculate);

改变页面上第二个input的值时,

amountEl_two.addEventListener("input", calculate);

在这里插入图片描述

第一步:获取到两个input的值后赋值给currency_one与currency_two；
第二步:下载货币汇，下载完毕后然后都转换成对象json(),然后都转换成对象后,
第三步:然后是算出比如这样
在这里插入图片描述
在这里插入图片描述

意思是data第一个
在这里插入图片描述

在rates数组中的汇率.(rates中的是上面的图片对应的某一个国家的汇率.)
数组中的是下面的值.
在这里插入图片描述

在这里插入图片描述

意思是:
在这里插入图片描述
在这里插入图片描述

然后是交换.

swap.addEventListener("click", () => {
  const temp = currencyEl_one.value;
  currencyEl_one.value = currencyEl_two.value;
  currencyEl_two.value = temp;
  calculate();
});

交换代表了是什么与什么交换.
比如之前是人民币与美元.
按钮之后是美元和人民币.

文章标签：
JavaScript
前端开发
容器
数据格式
JSON
关键词：
CSS html
HTML CSS
JavaScript CSS
HTML js
JavaScript系统
贵哥的编程之路(热爱分享)
目录
相关文章
陌陌谣
|
23天前
|
监控 算法 JavaScript
基于 Node.js Socket 算法搭建局域网屏幕监控系统
在数字化办公环境中，局域网屏幕监控系统至关重要。基于Node.js的Socket算法实现高效、稳定的实时屏幕数据传输，助力企业保障信息安全、监督工作状态和远程技术支持。通过Socket建立监控端与被监控端的数据桥梁，确保实时画面呈现。实际部署需合理分配带宽并加密传输，确保信息安全。企业在使用时应权衡利弊，遵循法规，保障员工权益。
陌陌谣
37 7
雨溪-yuxi
|
2月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程，适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生，分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后，通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者，获取更多技术文章。
雨溪-yuxi
40 2
2024年5月node.js安装(winmac系统)保姆级教程
东方睿赢
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言，它扩展了 JavaScript，为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言，它扩展了 JavaScript，为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义，TypeScript 能够在编码阶段发现潜在错误，提高代码质量；支持组件的清晰定义与复用，增强代码的可维护性；与 React、Vue 等框架结合，提供更佳的开发体验；适用于大型项目，优化代码结构和性能。随着 Web 技术的发展，TypeScript 的应用前景广阔，将继续引领 Web 开发的新趋势。
东方睿赢
53 2
cqtianxin1
|
3月前
|
缓存 JSON JavaScript
Node.js模块系统
10月更文挑战第4天
cqtianxin1
56 2
游客zi3qmblbcdexu
|
3月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
游客zi3qmblbcdexu
45 0
萤火虫的小尾巴
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
萤火虫的小尾巴
107 0
_揽
|
前端开发 测试技术
html+css+js+jQuery学习笔记（一）
html+css+js+jQuery学习笔记
_揽
134 0
html+css+js+jQuery学习笔记（一）
蓝帽子小智
|
JavaScript 前端开发 Go
html+js+Jquery（三）
html+js+Jquery（三）
蓝帽子小智
181 1
html+js+Jquery（三）
蓝帽子小智
|
设计模式 JavaScript 前端开发
html+js+Jquery（四）
html+js+Jquery（四）
蓝帽子小智
167 0
html+js+Jquery（四）
蓝帽子小智
|
前端开发 JavaScript 容器
html+js+Jquery（二）
html+js+Jquery（二）
蓝帽子小智
139 0
html+js+Jquery（二）

热门文章

最新文章

  • 1
    Midscene.js：AI 驱动的 UI 自动化测试框架，支持自然语言交互，生成可视化报告
  • 2
    折腾之王：JavaScript之父Brave浏览器与BAT的诞生
  • 3
    Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式
  • 4
    npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
  • 5
    Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
  • 6
    Node.js导入MongoDB具体操作指南
  • 7
    JavaScript字符串的常用方法
  • 8
    局域网网络管控里 Node.js 红黑树算法的绝妙运用
  • 9
    【JavaScript】——JS基础入门常见操作（大量举例）
  • 10
    基于 Node.js Socket 算法搭建局域网屏幕监控系统
  • 1
    html5+svg太空人404动画模板源码
    31
  • 2
    css3 svg制作404页面动画效果HTML源码
    48
  • 3
    （html在线预览cad图纸插件）网页CAD绘制条形码、二维码的教程
    25
  • 4
    【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    26
  • 5
    Html5 Canvas绘制圆形仪表盘动画源码
    11
  • 6
    “弘五四,耀青春”程序创意获奖作品【html+css】
    18
  • 7
    日常答题赢奖励单页HTML源码
    43
  • 8
    【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
    57
  • 9
    jQuery实现的卡片式翻转时钟HTML源码
    11
  • 10
    【Html.js——生成欢迎语】关于你的欢迎语（蓝桥杯真题-1764）【合集】
    38

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
    • 下一篇
    阿里云oss简介和如何对接使用