JavaScript 利用Ajax制作一个汇率转换器

AR.K

已于 2022-05-18 23:00:02 修改

阅读量884

点赞数 3

文章标签： javascript ajax 开发语言

于 2022-05-18 22:56:27 首次发布

本文链接：https://blog.csdn.net/qq_46568518/article/details/124852697

版权

照常我们先上效果(先上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"> &nbsp;交换 </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 下一篇就和大家见面哦

AR.K

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript 利用Ajax制作一个汇率转换器

照常我们先上效果(先上dj，先上djbushi）：我们先制作一个这样的简单页面html及css代码如下： <style> * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } :root { --mian-color: #0096
复制链接

扫一扫