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();
});

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

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

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

热门文章

最新文章

相关课程

相关电子书