您的位置：首页 > Web前端 > JavaScript

JavaScript实现汇率j简单转换工具

2017-03-08 20:36 330 查看
最重要的原则

- 先思考，再写代码，分清模块编写

- 先完成最简单的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>

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

<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>

数额： <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>>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航