代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
.box {
background-color: #efefef;
width: 700px;
height: 300px;
border: 1px solid skyblue;
margin: 50px auto;
box-shadow: 3px 3px 3px #888;
}
table {
margin: 50px auto;
}
table ,tr, td {
/*border: 1px solid lightgreen;*/
padding: 20px;
}
</style>
</head>
<body>
<div>
<form>
<table>
<tr>
<td><input type="text" name="st1"></td>
<td><select name="option">
<option value="null"> 请选择操作 </option>
<option value="add"> + </option>
<option value="sub"> - </option>
<option value="mul"> * </option>
<option value="div"> / </option>
</select></td>
<td ><input type="text" name="st2"></td>
<td ><button type="button">计算</button></td>
</tr>
<tr>
<td colspan="2">结果</td>
<td colspan="2"><h2 id="res"></h2></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var st1 = document.getElementsByName('st1')[0]
var st2 = document.getElementsByName('st2')[0]
var opt = document.getElementsByName('option')[0]
var btn = document.getElementsByTagName('button')[0]
var res = document.getElementById('res')
btn.onclick = function() {
if (st1.value.length == 0) {
alert('请输入一个数字')
st1.focus()
return false
}else if (isNaN(st1.value)) {
alert('非法操作，请输入有效数据')
st1.focus()
return false
}else if (st2.value.length == 0 ) {
alert('请输入一个数字')
st2.focus()
return false
}else if (isNaN(st2.value)) {
alert('非法操作，请输入有效数据')
st2.focus()
return false
}else{
var data1 = parseFloat(st1.value)
var data2 = parseFloat(st2.value)
}
var option = opt.value
var temp = 0
var flag = ''
switch(option){
case 'null' :
alert('请选择操作类型')
opt.focus()
return false
case 'add' :
flag = '+'
temp = data1 + data2
break
case 'sub' :
flag = '-'
temp = data1 - data2
break
case 'mul' :
flag = '*'
temp = data1 * data2
break
case 'div' :
flag = '/'
if (data2 == 0 ) {
alert('除数不能为0，请重新输入')
st2.focus()
return false
}else{
temp = data1 / data2
}
break
}
res.innerHTML = data1+' '+ flag+' '+ data2+' = '+temp
}
</script>
</body>
</html>手抄代码
