1. 广州SEO技术博客首页
  2. JavaScript

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

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

  • 先思考,再写代码,分清模块编写
  • 先完成最简单的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>>
汇率换算开发
汇率换算开发

 

原创文章,作者:小嵘SEO技术,如若转载,请注明出处:https://www.seo388.com/exchangeratetool/

联系我们

17688872082

在线咨询:点击这里给我发消息

邮件:2668888288@QQ.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code