                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

供各位參考，代碼中有對(duì)應(yīng)的注釋。

<!DOCTYPE?html>
<html>?
<head>??
<title>?事件</title>????
<script?type="text/javascript">???
function?count(){????
//獲取第一個(gè)輸入框的值????
var?num1=document.getElementById("txt1").value;????
//獲取第二個(gè)輸入框的值????
var?num2=document.getElementById("txt2").value;????
//獲取選擇框的值????
var?calc=document.getElementById("select").value;????
//用于存放計(jì)算結(jié)果，這里先初始化????result=null;????
//用switch語(yǔ)句區(qū)分符合，對(duì)應(yīng)計(jì)算方式????
switch(calc){????????
case?"+":???????????
/*?parseFloat()是把document.getElementById().value????????????
中得到得String（字符型）值轉(zhuǎn)換為FLoat（浮點(diǎn)）值*/????????????
result=parseFloat(num1)+parseFloat(num2);????????????
break;????????
case?"-":????????????
result=parseFloat(num1)-parseFloat(num2);????????????
break;????????
case?"*":????????????
result=parseFloat(num1)*parseFloat(num2);????????????
break;????????
case?"/":????????????
result=parseFloat(num1)/parseFloat(num2);????????
}????
//把上面switch語(yǔ)句得到得結(jié)果賦予id為fruit的text框中????
document.getElementById("fruit").value=result;???
}??
</script>??
</head>??
<body>???
<input?type='text'?id='txt1'?/>????
<select?id='select'>		
<option?value='+'>+</option>		
<option?value="-">-</option>		
<option?value="*">*</option>		
<option?value="/">/</option>???</select>???
<input?type='text'?id='txt2'?/>????
<input?type='button'?value='?=?'?onclick="count()"/>????
<!--通過(guò)?=?按鈕來(lái)調(diào)用創(chuàng)建的函數(shù)，得到結(jié)果-->????
<input?type='text'?id='fruit'?/>????
</body>
</html>