HTML+CSS+JS实现简易汇率计算器（使用Fetch）

还是github上找的小玩意跟着模仿着敲的。
首先看一下fetch，我也是学过ajax之后头一次见这玩意，然后就看着人家代码顺便上MDN看了一下。

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
反正这个东西好像就是比ajax要牛的东西？具体的还是MDN看一下文档吧

MDN-fetch链接

直接看最基本用法：

fetch('http://example.com/movies.json').then(response => response.json()).then(data => console.log(data));

可以log看一下返回的东西就差不多知道咋用了吧

看一下汇率计算器

直接上源码

html代码

<body><img src="img/money.png" alt=""><h1>Exchange Rate Calculator</h1><p class="description">Choose the currency and the amounts to get the exchange rate</p><div class="container"><div class="top flex"><select name="" id="choose-tb"><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">BSD</option><option value="CAD">CAD</option><option value="CHF">CHF</option><option value="CLP">CLP</option><option value="CNY">CNY</option><option value="COP">COP</option><option value="CZK">CZK</option><option value="DKK">DKK</option><option value="DOP">DOP</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="selected">USD</option><option value="UYU">UYU</option><option value="VND">VND</option><option value="ZAR">ZAR</option></select><input type="number" value="1" placeholder="0" id="input-tb"></div><div class="medium flex"><button class="swapBtn">Swap</button><p class="rate"></p></div><div class="bottom flex"><select name="" id="choose-db"><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">BSD</option><option value="CAD">CAD</option><option value="CHF">CHF</option><option value="CLP">CLP</option><option value="CNY">CNY</option><option value="COP">COP</option><option value="CZK">CZK</option><option value="DKK">DKK</option><option value="DOP">DOP</option><option value="EGP">EGP</option><option value="EUR" selected="selected">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" placeholder="0" id="input-db"></div></div><script src="script.js"></script>
</body>

css代码

* {margin: 0;padding: 0;box-sizing: border-box;
}select:focus,
input:focus,
button:focus {outline: 0;
}body {display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;background-color: #f4f4f4;
}img {width: 150px;
}h1 {margin: 22px 0;color: rgb(47, 186, 158);
}.description {margin: 16px 0;
}select {padding: 9px 5px 9px 9px;font-size: 16px;background: transparent;border: 1px #dedede solid;border-radius: 5px;
}input {font-size: 30px;text-align: right;border: 0;background: transparent;
}.flex {display: flex;align-items: center;justify-content: space-between;
}.top {padding: 40px 0;
}.swapBtn {padding: 5px 12px;background-color: rgb(47, 186, 158);color: #fff;border-radius: 5px;
}.rate {color: rgb(47, 186, 158);font-size: 14px;padding: 0 10px;
}.bottom {padding: 40px 0;
}

js代码

var selectTb = document.querySelector('#choose-tb')
var selectDb = document.querySelector('#choose-db')
var inputTb = document.querySelector('#input-tb')
var inputDb = document.querySelector('#input-db')
var swapBtn = document.querySelector('.swapBtn')
var rateData = document.querySelector('.rate')function calculate() {fetch('https://open.exchangerate-api.com/v6/latest').then(res => res.json()).then(data => {rate = data.rates[selectDb.value] / data.rates[selectTb.value]rateData.innerText = `1${selectTb.value}=${rate} * ${selectDb.value}`inputDb.value = (inputTb.value * rate).toFixed(2)})
}
selectTb.addEventListener('change', calculate)
selectDb.addEventListener('change', calculate)
inputTb.addEventListener('input', calculate)
inputDb.addEventListener('input', calculate)swapBtn.addEventListener('click', () => {var temp = selectDb.valueselectDb.value = selectTb.valueselectTb.value = tempcalculate()
})calculate()

API用的是人家原来项目上的，所以这个汇率八成不太符合实际吧。

HTML+CSS+JS实现简易汇率计算器（使用Fetch）相关推荐

JS实现简易网页计算器
js实现简易计算器.计算器的布局不像表格那么公正对称,所以布局这块相对比较繁琐,但是也可以通过这来练习一下CSS. 一.实现功能完成计算器的加减乘除的基本计算功能实现输入框中的字符串拼接二.实现 ...
html + css + js 实现简易计算器
使用LICEcap工具截取的效果图: 计算器页面实现: 为计算器的input输入框添加disabled="disabled"属性,防止从键盘中直接输入除小数点之外的非数字符号:设置 ...
HTML、CSS与JS实现简易iPhone计算器
效果如图源码,通俗易懂 <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
HTML+CSS+JS一个简易的计时器
一个粗糙的计时器, HTML部分: <div class="wrap"><div id="timer"><span id=&quo ...
html css js 实现简易时钟
基本思路: 1. 通过日期对象获取当前时间 2. 利用getHours, getMinutes, getSeconds获取当前的时分秒 3. 分针的位置 = rotate(当前分钟*6 deg) 4. ...
基于HTML+css+js设计简易的汽车用户注册界面
应用背景为假设以福建省某汽车4s店用户的注册管理来实现,设置用户名.密码.二次确认密码.邮箱.真实姓名.所属区市.汽车类型这几个注册信息,在注册新用户的过程中,每个注册信息都借助JavaScript与 ...
HTML+CSS+js搭建简易网页（1）构建网页的骨架
前言本人正处于JavaScript学习中,并进行网页实战练习进行回顾HTML和CSS,接下来将推出搭建一个网页的必备部分的知识以及实战部分的一个系列文章.本篇文章将带领大家搭建一个网页的骨架. 企业 ...
【网页实战】html+css+js超简易书籍购买网站实现（FindMyBook）
代码链接:https://github.com/LimxRabbit/FindMyBook.git 页面截图(功能描述):
html+css+js实现科学计算器
代码地址如下: http://www.demodashi.com/demo/13751.html 项目描述纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有 ...

HTML+CSS+JS实现简易汇率计算器（使用Fetch）

HTML+CSS+JS实现简易汇率计算器（使用Fetch）相关推荐

最新文章

热门文章