汇率计算器jquery

最新推荐文章于 2024-09-29 00:16:58 发布

江淼11

最新推荐文章于 2024-09-29 00:16:58 发布

阅读量339

点赞数

分类专栏： jquery 文章标签： jquery html css

本文链接：https://blog.csdn.net/m0_69422950/article/details/124831485

版权

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用jQuery库创建一个简单的汇率计算器，结合HTML和CSS，实现货币之间的便捷转换功能，帮助用户理解不同货币的价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html lang="zh-CN">
	<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>Document</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	list-style: none;
	box-sizing: border-box;
	}
	:root {
	--main-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(--main-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(--main-color);
	line-height: 30px;
	color: white;
	border-radius: 4px;
	}
	.rule #hl {
	color: var(--main-color);
	font-size: 1.8rem;
	}

	</style>
	</head>
	<body>
	<div class="container">
	<img width="120" src="" 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 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>
	<script src="./js/jquery.min.js"></script>
	<script>
	var hl = 1;

	// 给select添加change事件
	$("select").change(function(){
	getConversionRate();
	})

	//btn点击
	$(".btn").click(function(){
	var temp = $("#first").val();
	$("#first").val($("#second").val())
	$("#second").val(temp);
	getConversionRate();
	})

	//获取汇率
	function getConversionRate(){
	$.ajax({
	type:"get",
	url:`https://v6.exchangerate-api.com/v6/feab39dc920c88117d903eee/pair/${$("#first").val()}/${$("#second").val()}`,
	async:false,
	success:function(res){
	console.log(res)
	hl = res.conversion_rate;
	culNumber();
	}


	})
	}
	//重新计算数字
	function culNumber(){
	var n = $("input:eq(0)").val()/1;
	$('#hl').html(`${n} = ${n*hl}`)
	}
	</script>
	</html>