<html>
<head>
<title>加减乘除</title>
<script type="text/javascript">
window.onload = function () {
var txtNumber1Emement = document.getElementById("txtNumber1");
var txtNumber2Emement = document.getElementById("txtNumber2");
var operatorTypeEmlement = document.getElementById("operatorType");
txtNumber1Emement.onkeydown = txtNumber2Emement.onkeydown = function (e) {
e = e || window.event;
var keyCode = e.keyCode || e.charCode;
//清除键
if (keyCode == 8) {
return;
}
//回车键
if (keyCode == 13) {
doWork();
return;
}
//如果不是数字阻止输入
if (keyCode < 48 || keyCode > 57) {
if (typeof e.preventDefault == "function") {
e.preventDefault();
e.stopPropagation();
}
else {
e.returnValue = false;
e.cancelBubble = true;
}
}
}
operatorTypeEmlement.onchange = function () {
doWork();
}
}
function doWork() {
var txtNumber1Value = document.getElementById("txtNumber1").value || 0;
var txtNumber2Value = document.getElementById("txtNumber2").value || 0;
var value1 = parseInt(txtNumber1Value, 10);
var value2 = parseInt(txtNumber2Value, 10);
var operator = document.getElementById("operatorType").value;
document.getElementById("result").value = eval(value1 + operator + value2);
}
</script>
</head>
<body>
<fieldset style="width: 600px; height: 500px; margin: 0px;">
<input type="text" id="txtNumber1" style="width: 270px; border-right-width: 0px;
text-align: right" /><select id="operatorType" style="width: 163px; border-left-width: 0px">
<optgroup>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</optgroup>
</select><br />
<input type="text" id="txtNumber2" style="width: 270px" /><br />
=
<input type="text" id="result" disabled="disabled" style="width: 100%" />
</fieldset>
</body>
</html>