最重要的原则

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

先完成最简单的Html界面部分，再编写javascript实现功能的函数，功能完成之后有足够的精力再写css

debug时保持冷静，每获取一个值一句句的alert出来进行排除

实现的特效

作业4效果.gif

1. Html部分代码

港元 Hong Kong Dollar HKD

美元 America Dollar AD

人民币 Chinese Yuan Renminbi

人民币 Chinese Yuan Renminbi

港元 Hong Kong Dollar HKD

美元 America Dollar AD

数额：

按当前税率兑换结果
港元	汇率	人民币
100	0.849082	84.9082

2. 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;

}

3. CSS简单代码

table {text-align: center;border:1px solid lightgreen}

#tr1 {background-color :#cce6cd; border:1px solid lightgreen }

tr, td { border:1px solid lightgree }

>