jkd112233 2023-03-05 17:16 采纳率: 85.4%
浏览 51
已结题

html做一个简易汇率转化器，不知道js部分怎么写

想用html做一个简易汇率转化器，不知道js部分怎么写，需要用到switch以及全局变量。
如果用户在一个格子中输入，那么另一个格子应该根据所选货币显示结果。
如果两个都已经输入，则应使用上面输入进行计算，以便在下面输入中显示。
如果都没有输入，点击convert则会显示“Please enter"
想达到下面的效果：

img

<html>
    <head>
        <link rel="stylesheet" href="DW ass1.css">
    </head>
    <body>
        <h1>Currency Exchange</h1>
        <form>
            <input type="text" name="num" id="i1" style="width:250px;height:28px">
            <select name="m1" style="width:150px">
                <option value="Chinese Yuan" selected="selected">Chinese Yuan</option>
                <option value="US Dollar">US Dollar</option>
                <option value="Euro">Euro</option>
                <option value="Hong Kong Dollar">Hong Kong Dollar</option>
            </select>
            <br><br>
            <input type="text" name="num" id="i2" style="width:250px;height:28px">
            <select name="m1" style="width:150px">
                <option value="Chinese Yuan">Chinese Yuan</option>
                <option value="US Dollar" selected="selected">US Dollar</option>
                <option value="Euro">Euro</option>
                <option value="Hong Kong Dollar">Hong Kong Dollar</option>
            </select>
        </form>

        <button type="button" name="con" onclick="cal()">Convert</button>
        
        <script>

        </script>
    </body>
</html>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2023-03-05 17:18
    关注

    一定用swith的话可以用双switch来做，就是代码量会多，特别货币多的话

    用字典就比较简单了，只需要整个人民币和其他货币的汇率，然后先同一转人民币什么的，再转成其他的货币

    示例如下

    <html>
<head>
    <link rel="stylesheet" href="DW ass1.css">
</head>
<body>

    <h1>Currency Exchange</h1>
    <form>
        <input type="text" name="num" id="i1" style="width:250px;height:28px">
        <select name="m1" style="width:150px">
            <option value="Chinese Yuan" selected="selected">Chinese Yuan</option>
            <option value="US Dollar">US Dollar</option>
            <option value="Euro">Euro</option>
            <option value="Hong Kong Dollar">Hong Kong Dollar</option>
        </select>
        <br><br>
        <input type="text" name="num" id="i2" style="width:250px;height:28px">
        <select name="m1" style="width:150px">
            <option value="Chinese Yuan">Chinese Yuan</option>
            <option value="US Dollar" selected="selected">US Dollar</option>
            <option value="Euro">Euro</option>
            <option value="Hong Kong Dollar">Hong Kong Dollar</option>
        </select>
    </form>

    <button type="button" name="con" onclick="cal()">Convert</button>

    <script>
        let i1 = document.querySelector('#i1')
        let form = i1.form;
        let m1 = form.m1[0];//m1有2个，所以form.m1为dom数组，不知道是不是html id有问题
        let i2 = form.i2
        let m2 = form.m1[1];

        function cal() {
            if (i1.value == '' && i2.value == '') {//没有输入
                alert('Please enter')
                return;
            }
            let source = i1.value ? i1.value : i2.value;//第一个框有值或者2个都有，源货币和输入值用第一个框
            let sourceM = i1.value ? m1.value : m2.value;//源货币

            let targetM = i1.value ? m2.value : m1.value;//目标货币

            let target = i1.value ? i2 : i1;//显示结果容器

            let result=source;//转换结果，默认是带转换数据

            //双swith
            switch (sourceM) {//源货币类型
                case 'Chinese Yuan':
                    switch (targetM) {//目标货币类型
                        case 'US Dollar':
                            result = (source / 6.9074).toFixed(4);//保留4位小数
                            break
                        case 'Euro':
                            result = (source / 7.3454).toFixed(4);//保留4位小数
                            break
                        case 'Hong Kong Dollar':
                            result = (source / 0.8800).toFixed(4);//保留4位小数
                            break
                    }
                    break
                //其他下面3个一样再加Switch就行了，自己写下汇率
                case 'US Dollar':
                    switch (targetM) {//目标货币类型
                        case 'Chinese Yuan':
                            result = (source / 0.1448).toFixed(4);//保留4位小数
                            break
                        case 'Euro':
                            result = (source / 1.0634).toFixed(4);//保留4位小数
                            break
                        case 'Hong Kong Dollar':
                            result = (source / 0.1274).toFixed(4);//保留4位小数
                            break
                    }
                    break
                case 'Euro':
                    switch (targetM) {//目标货币类型
                        case 'Chinese Yuan':
                            result = (source / 0.1361).toFixed(4);//保留4位小数
                            break
                        case 'US Dollar':
                            result = (source / 0.9404).toFixed(4);//保留4位小数
                            break
                        case 'Hong Kong Dollar':
                            result = (source / 0.1198).toFixed(4);//保留4位小数
                            break
                    }
                    break
                case 'Hong Kong Dollar':
                    switch (targetM) {//目标货币类型
                        case 'Chinese Yuan':
                            result = (source / 1.1364).toFixed(4);//保留4位小数
                            break
                        case 'US Dollar':
                            result = (source / 7.8494).toFixed(4);//保留4位小数
                            break
                        case 'Euro':
                            result = (source / 8.3471).toFixed(4);//保留4位小数
                            break
                    }
                    break
            }

            target.value = result
        }
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 3月13日
  • 已采纳回答 3月5日
  • 创建了问题 3月5日

悬赏问题

  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题
  • ¥15 matlab中使用gurobi时报错
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么