使用JavaScript开发制作汇率转换工具

SONIC SEO • 2018年8月11日 10:14 • JavaScript • 阅读 1243

制作实现汇率转换工具前重要的原则

先思考，再写代码，分清模块编写
先完成最简单的Html界面部分，再编写javascript实现功能的函数，功能完成之后有足够的精力再写css
debug时保持冷静，每获取一个值一句句的alert出来进行排除

实现的特效

1. Html部分代码

<body>
<p align="center">
<select id = "box1">
    <option name="gy" value = "港元">港元 Hong Kong Dollar HKD</option>
    <option name="my"  value = "美元">美元 America Dollar AD</option>
    <option name="rm" value = "人民币">人民币 Chinese Yuan Renminbi</option>
</select>

    &nbsp;<input type="button" value="互换" onclick="changeType()" style="background-color:#6699cc"/>&nbsp;

<select id="box2">
    <option name="rm" value = "人民币">人民币 Chinese Yuan Renminbi</option>
    <option name="gy" value = "港元">港元 Hong Kong Dollar HKD</option>
    <option name="my" value = "美元">美元 America Dollar AD</option>

</select>

    &nbsp;数额：&nbsp;<input type="text" value="100" id="mount" >
<input type="button" value="汇率转换" onclick="changeMoney()" style="background-color:#6699cc"/></p>

<table align="center"  border="1" style="width: 60%; height: 200px; ">

    <tr id = "tr1" >
        <td colspan="3"><b>按当前税率兑换结果</b></td>
    </tr>

    <tr id="tr2">
        <td>港元</td>
        <td>汇率</td>
        <td>人民币</td>
    </tr>

    <tr id="tr3">
        <td>100</td>
        <td>0.849082</td>
        <td>84.9082</td>
    </tr>
</table>
</body>

2. JavaScript脚本代码如下:

 <script type="text/javascript">

        function changeType()
        {
            //获取2个selectBox的元素节点
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");

            //获取其选定的货币种类name1 和name2
            var name1 = box1.options[box1.selectedIndex].value;
            var length1 = box1.length;

            var name2 = box2.options[box2.selectedIndex].value;
            var length2 = box2.length;

//           设置box2中被选中的项为name1
            for (var i = 0; i < length2; i++)
            {
                if ( box2.options[i].value == name1)
                {
                    box2.selectedIndex = i;
                    break;
                }
            }
            // 设置box1中被选中的项为name2
            for (var i = 0; i < length1; i++)
            {
                if ( box1.options[i].value == name2)
                {
                    box1.selectedIndex = i;
                    return;
                }
            }
        }

        //传入左右边框选定的select对象
        function changeRate(typeLeft, typeRight)
        {
            /*汇率转换 定义数组存储汇率数据（按下拉框显示顺序）
             判断 value 6种情况
             美-人 美-港
             人-港 人-美
             港-人 港-美
             如果name1为港元 arrayMoneyG[]中取 取出的数传给表格32
             如果name1为美元 arrayMoneyA[]中取
             如果name1为人民币 arrayMoneyR[]中取
             返回rate*/
            var arrayMoneyG = [0.849082, 1, 0.1289];
            var arrayMoneyA = [6.865, 7.7575,  1];
            var arrayMoneyR = [1, 1.13, 0.1457];
            var rate;
//左边框选定的是港元
            if (typeLeft == "港元")
            {//右边框选定的是人民币
                if (typeRight == "人民币")
                {
                    rate = arrayMoneyG[0];
                }
                else if (typeRight == "美元")
                {
                    rate = arrayMoneyG[2];
                }
                else
                {
                    rate = 1;
                }
            }
            else if(typeLeft == "美元")
            {
                if (typeRight == "人民币")
                {
                    rate = arrayMoneyA[0];
                }
                else if (typeRight == "港元")
                {
                    rate = arrayMoneyA[1];
                }
                else
                {
                    rate = 1;
                }
            }
            else
            {
                if (typeRight == "港元")
                {
                    rate = arrayMoneyR[1];
                }
                else if (typeRight == "美元")
                {
                    rate = arrayMoneyR[2];
                }
                else
                {
                    rate = 1;
                }
            }
            return rate;
        }

        function changeMoney()
        {
            //获取box1,box2的value值 box1显示在21 box2显示在23 金额显示在31
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var box3 = document.getElementById("mount");

            //获取选定的box1 2的value值
            var name1 = box1.options[box1.selectedIndex].value;
            var name2 = box2.options[box2.selectedIndex].value;
            var mount = box3.value;
            //获取汇率
            var getRate = changeRate(name1, name2);

            //获取表格21和23,分别赋值
            var tr1Table = document.getElementById("tr2");

            tr1Table.childNodes[0].innerHTML = name1;
            tr1Table.childNodes[2].innerHTML = name2;

            //给表格31赋值 33赋值 getRate传给表格32
            var tr2Table = document.getElementById("tr3");
//chroum中赋值不成功,需要在IE测试
            tr2Table.childNodes[0].innerHTML = mount;
            tr2Table.childNodes[1].innerHTML = getRate;
            tr2Table.childNodes[2].innerHTML = mount * getRate;
        }
    </script>

3. CSS简单代码

<style>
        table {text-align: center;border:1px solid lightgreen}
        #tr1 {background-color :#cce6cd; border:1px solid lightgreen }
        tr, td { border:1px solid lightgree }
</style>>

原创文章，作者：SONIC SEO，如若转载，请注明出处：https://www.seo388.com/exchangeratetool/