原生JS-汇率交换

最新推荐文章于 2023-07-08 18:09:39 发布

Jackie_Mina

最新推荐文章于 2023-07-08 18:09:39 发布

阅读量142

点赞数 1

分类专栏： javascript 前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_36752088/article/details/128936053

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

本文档为学习笔记，原课程为米修在线的50个实战彻底掌握原生JS

<!--html-->
<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>

/*css*/
:root{
      --primary-color:#5fbaa7;
}
*{
      box-sizing: border-box;
}
body{
      background-color: #f4f4f4;
      font-family: Arial, Helvetica, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      padding: 20px;
}

h1{
      color:var(--primary-color);
}
p{
      text-align: center;
}
.btn{
      color: #fff;
      background-color: var(--primary-color);
      cursor: pointer;
      border-radius: 5px;
      font-size: 12px;
      padding: 5px 15px;
}

.currency{
      padding: 40px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
}
select{
      padding: 10px 20px 10px 10px ;
      border: 1px solid #dedede;
      font-size: 16px;
      background-color: transparent;
}

input{
      text-align: right;
      border: 0;
      font-size: 16px;
      background-color: transparent;
}

select:focus,input:focus,.btn:focus{
      outline: 0;
}

.swap-rate-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
}

.rate{
      color: var(--primary-color);
      font-size: 14px;
      padding: 0 10px;
}
@media(max-width:600px){
      .currency input{
            width: 200px;
      }
}

//获取节点
const currency_one=document.getElementById('currency-one')
const amount_one=document.getElementById('amount-one')

const currency_two=document.getElementById('currency-two')
const amount_two=document.getElementById('amount-two')

const swap=document.getElementById('swap')
const rate=document.getElementById('rate')


//获取汇率并实现dom节点更新
function calculate(){
      const currency_one_v=currency_one.value
      const currency_two_v=currency_two.value
      // console.log(currency_one_v,currency_two_v)

      fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one_v}`)
      .then(res=>res.json())
      .then(data=>{
            const rates=data.rates[currency_two_v]
            rate.innerText=`1${currency_one_v}=${rates}${currency_two_v}`
            amount_two.value=(+amount_one.value*rates).toFixed(2)
      })

}


//事件监听
currency_one.addEventListener('change',calculate)
currency_two.addEventListener('change',calculate)
amount_one.addEventListener('input',calculate)
amount_two.addEventListener('input',calculate)


swap.addEventListener('click',()=>{
      const temp=currency_one.value
      currency_one.value=currency_two.value;
      currency_two.value=temp
      calculate()
})

calculate()