最重要的原则 - 先思考，再写代码，分清模块编写 - 先完成最简单的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()
{
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var name1 = box1.options[box1.selectedIndex].value;
var length1 = box1.length;
var name2 = box2.options[box2.selectedIndex].value;
var length2 = box2.length;
for (var i = 0; i < length2; i++)
{
if ( box2.options[i].value == name1)
{
box2.selectedIndex = i;
break;
}
}
for (var i = 0; i < length1; i++)
{
if ( box1.options[i].value == name2)
{
box1.selectedIndex = i;
return;
}
}
}
function changeRate(typeLeft, typeRight)
{
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()
{
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("mount");
var name1 = box1.options[box1.selectedIndex].value;
var name2 = box2.options[box2.selectedIndex].value;
var mount = box3.value;
var getRate = changeRate(name1, name2);
var tr1Table = document.getElementById("tr2");
tr1Table.childNodes[0].innerHTML = name1;
tr1Table.childNodes[2].innerHTML = name2;
var tr2Table = document.getElementById("tr3");
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>>
转载请注明原文地址: https://ju.6miu.com/read-5817.html
