照常我们先上效果(先上dj，先上djbushi）：
Document - Google Chrome 2022-05-18 22-21-07
我们先制作一个这样的简单页面
html及css代码如下：
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
:root {
--mian-color: #0096d9;
}
html {
font-size: 62.5%;
}
body {
height: 100vh;
padding-top: 100px;
background-color: #eee;
}
.container {
width: 400px;
height: 500px;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 2.6rem;
color: var(--mian-color);
}
.ipts {
height: 40px;
display: flex;
justify-content: space-between;
}
input, select {
border: 0;
outline: 0;
background-color: transparent;
height: 40px;
line-height: 40px;
width: 40%;
margin-top: 2rem;
}
select {
border: 1px solid lightgray;
}
input {
text-align: right;
font-size: 2rem;
font-weight: 900;
}
.rule {
height: 100px;
font-size: 2rem;
font-weight: 900;
justify-content: space-between;
align-items: center;
margin-top: 60px;
}
.rule .btn {
width: 60px;
height: 30px;
background-color: var(--mian-color);
line-height: 30px;
color: white;
border-radius: 4px;
}
.rule #hl {
margin-left: 2rem;
color: var(--mian-color);
font-size: 1.8rem;
}
</style>
</head>
<body>
<div class="container">
<h1>汇率计算器</h1>
<p>选择货币单位获取汇率</p>
<div class="ipts">
<select id="first">
<option value="CNY">人民币CNY</option>
<option value="USD">美元USD</option>
<option value="AUD">澳元AUD</option>
<option value="HKD">港元HKD</option>
<option value="JPY">日元JPY</option>
<option value="KRW">韩元KRW</option>
</select>
<input id="in" type="text" value="1" placeholder="请输入数值">
</div>
<p class="rule">
<span class="btn"> 交换 </span>
<span id="hl">1 = 1</span>
</p>
<div class="ipts">
<select id="second">
<option value="CNY">人民币CNY</option>
<option value="USD">美元USD</option>
<option value="AUD">澳元AUD</option>
<option value="HKD">港元HKD</option>
<option value="JPY">日元JPY</option>
<option value="KRW">韩元KRW</option>
</select>
<input type="text" value="1" disabled>
</div>
</div>
</body>
对于这些简单的 *** 作我也就不多进行讲解，相信以大家的水平来说完全 so easy
那么我们就直接开始js部分：
我们首先去bootcdn.cn 加一个jq，当然你也可以自己写一个jQuery(一件三连的话作者大大就给你们写一个😏)
我们进入网站后选择jQuery列表，
选择3.6版本的第二个复制用就好了
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
然后开始我们的Ajax部分
function getHuiLv() {
$.ajax({
type: "get",
url: "",
async: false,
})
}
进行get请求，异步 *** 作，然后就是地址了，这里我们去这个网站app.exchangerate-api.com注册自己的账号
然后会获取到一个API KEY，再点击Opens New Tab(文档概述) ,在左侧找到Pair conversiont(配对转换)，
在里面就可以找到这个 GET https://v6.exchangerate-api.com/v6/YOUR-API-KEY/pair/EUR/GBP
YOUR-API-KEY部分就是前面你的API KEY
/EUR/GBP 分别是要转换的两个部分，可以看到html部分 便是两个select的值 我们用jq对象获取$("#first").val() $("#second").val()
接下来我们书写地址部分
https://v6.exchangerate-api.com/v6/fd48af7dd257c1ec104c80db/pair/${$("#first").val()}/${$("#second").val()}
这里注意哦 链接部分是用反引号的
url: `https://v6.exchangerate-api.com/v6/fd48af7dd257c1ec104c80db/pair/${$("#first").val()}/${$("#second").val()}`,
继续书写
定义一个变量，用于存放获取的汇率conversion_rate，
var hl = 1;
function getHuiLv() {
$.ajax({
type: "get",
url: `https://v6.exchangerate-api.com/v6/fd48af7dd257c1ec104c80db/pair/${$("#first").val()}/${$("#second").val()}`,
async: false,
success: function(res) {
hl = res.conversion_rate;
culNumber();
}
})
}
我们写一个汇率转换函数，用于计算汇率
function culNumber() {
var n = $("input:eq(0)").val()/1; //获取第一个input的值 最后转换成数字型
$("#hl").html(`${n} = ${n*hl}`);
}
最后分别添加转换的点击事件和(汇率)变化事件
$("select").change(function() {
getHuiLv();
})
//点击事件
$(".btn").click(function() {
var temp = $("#first").val();
$("#first").val($("#second").val());
$("#second").val(temp);
getHuiLv();
})
以上就完成了利用Ajax制作的汇率转换器，是不是斐常简单呢😚，大家要是想看自己写的jQurey 下一篇就和大家见面哦
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）