前端【AJAX】----汇率转换

最新推荐文章于 2023-06-05 09:09:28 发布

码农不秃呀

最新推荐文章于 2023-06-05 09:09:28 发布

阅读量143

点赞数

分类专栏：笔记文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_53271010/article/details/126994027

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!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;
    $(".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){
                var hl=res.conversion_rate;
                var result=$("#in").val()*hl;
                console.log(result);
                $("#out").val(result);
                $("#hl").html(`1=${hl}`);
            }
        })
    }
</script>
</html>

效果图