<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>汇率转换</title>
<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%;
}
select {
border: 1px solid lightgray;
}
input {
text-align: right;
font-size: 2rem;
font-weight: 900;
}
.rule {
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.rule .btn {
width: 60px;
height: 30px;
background-color: var(--mian-color);
line-height: 30px;
color: white;
border-radius: 4px;
}
.rule #hl {
color: var(--mian-color);
font-size: 1.8rem;
}
</style>
</head>
<body>
<div class="container">
<!-- < img width="120" src="img/zh.png" alt=""> -->
<h1>汇率计算器</h1>
<p style="margin: 3rem 0;">选择货币单位获取汇率</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 id="out" type="text" value="1" disabled>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var url = 'https://v6.exchangerate-api.com/v6/0710b62d4acb7877c4de9c6b/pair/${ $("#first").val() }/${ $("#second").val() }'
$(".btn").click(function(){
var first=$("#first").val()
$("#first").val($("#second").val())
$("#second").val(first)
getHl()
})
$("select").change(function(){
getHl()
})
$("#in").change(function(){
getHl()
})
function getHl(){
$.ajax({
type:'get',
url:`https://v6.exchangerate-api.com/v6/0710b62d4acb7877c4de9c6b/pair/${ $("#first").val() }/${ $("#second").val() }`,
success:function(res){
// console.log(res);
var hl=res.conversion_rate
var result=$("#in").val()*hl
console.log(result);
$("#out").val(result)
$("#hl").html(`1=${hl}`)
}
})
}
</script>
</html>
效果展示：
