最重要的原則
- 先思考，再寫代碼，分清模塊編寫
- 先完成最簡單的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>>