js计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
.box{
width: 500px;
height: 240px;
background-color: #f1e6ca;
border:1px dashed #000000;
text-align:center;
margin:20px auto;
color:#636363;
border-radius:15px;
box-shadow:2px 2px 2px #999;
}
table{
margin:auto;
}
td{
width: 100px;
height: 30px;
padding:5px 10px;
}
input,select{
width: 100%;
height: 100%;
border:none;
text-align: left;
padding-left:15px;
}
button{
width: 80%;
height: 100%;
border:none;
background-color:#000000;
color:white;
}
button:hover{
background-color: #ffff0a;
color:black;
width: 100%;
height: 110%;
}
</style>
</head>
<body>
<div class="box">
<h2>计算器</h2>
<table>
<tr>
<td>
<input type="text" name="opt1" id="opt1" placeholder="操作数1">
</td>
<td>
<select name="option" id="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="opt2" id="opt2" placeholder="操作数2">
</td>
<td><button type="button" id="btn">计算</button></td>
</tr>
<tr>
<td align="right" colspan="1"><h3>结果:</h3></td>
<td align="left" colspan="3"><h3 class="result" id="result"></h3></td>
</tr>
</table>
</div>
</body>
</html>
<script>
//第一步先获取操作数
let opt1=document.getElementById('opt1');
let opt2=document.getElementById('opt2');
let opt=document.getElementById('option');
let btn=document.getElementById('btn');
let result=document.getElementById('result');
// let opt1 = document.getElementsByName('opt1')[0];
// let opt2 = document.getElementsByName('opt2')[0];
// let opt = document.getElementsByName('option')[0];
// let btn = document.getElementsByTagName('button')[0];
// let result = document.getElementById('result');
//第二步,给按钮添加事件,进行计算
btn.onclick=function(){
let data1=0;
let data2=0;
if(opt1.value.length ===0 ) {
alert('第一个操作数不能为空');
opt1.focus();
return false;
}else if(isNaN( opt1.value)){
alert('第一个操作数必须是数字');
opt1.focus();
return false;
}else if(opt2.value.length ===0 ) {
alert('第二个操作数不能为空');
opt1.focus();
return false;
}else if(isNaN( opt2.value)) {
alert('第二个操作数必须是数字');
opt1.focus();
return false;
}else{
//解析字符串,返回浮点数
data1=parseFloat(opt1.value);
data2=parseFloat(opt2.value);
}
//对操作符进行处理
let option =opt.value;
let temp=0;
let 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='/';
//temp=data1 / data2;
//break;
if(data2 === 0){
alert('除数不能为0');
opt2.focus();
opt2.value='';
return false;
}else{
temp=data1 / data2;
//四舍五入,仅保留两位小数
temp= Math.round(temp*100)/100;
}
break;
}
let str='<span style="color: #000;">';
str += data1 + ' '+flag +' ' +data2 +'=' + temp;
str += '</span>';
result.innerHTML=str;
}
</script>
总结:opt.value获取值,opt.focus()获取焦点
