![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: lightgrey;
border:1px solid lightgrey;
text-align:center;
margin: 20px auto;
border-radius:10px;
box-shadow: 2px 2px 2px #999;
}
table{
margin:auto;
border: 1px solid red;
}
td{
width: 100px;
height: 30px;
padding: 5px;
}
</style>
</head>
<body>
<div class="box">
<h2>计算器</h2>
<form action="">
<table>
<tr>
<td><input type="text" name="opt1" placeholder="操作数1"></td>
<td>
<select id="" 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="opt2" placeholder="操作数2"></td>
<td><button type="button">计算</button></td>
</tr>
<tr>
<td><h3>结果:</h3></td>
<td><h3 id="result"></h3></td>
</tr>
</table>
</form>
</div>
<script>
//1.获取操作数,按钮,结果占位符
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');
//2.按钮添加事件
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('第一个操作数必须为数字');
}else if (opt2.value.length ===0){
alert('第二个操作数不能为空');
opt1.focus();
return false;
}else if(isNaN(opt2.value)){
alert('第二个操作数必须为数字');
}else {
data1 = parseFloat(opt1.value); //parseFloat 可以把字符串转为数字,确保值是数字
data2 = parseFloat(opt2.value);
}
//对操作符进行处理
let option = opt.value; //拿到了用户选择的操作
let temp = 0;
let flag = '';
switch(option){
case 'null':
alert('请选择操作类型');
opt.focus();
break;
case 'add':
flag = '+';
temp = data1 + data2;
break;
case 'sub':
flag = '-';
temp = data1 - data2;
break;
case 'mul':
flag = '*';
temp = data1 * data2;
break;
case 'div':
flag = '/';
//除数不能为0 的判断和处理
if(data2===0){
alert('除数不能为零');
opt2.value = '';
opt2.focus();
return false;
}else{
temp = data1 / data2;
//四舍五入,仅保留两位小数
temp = Math.round(temp*100) / 100; //
}
break;
}
let str = '<span style="color:red">';
str += data1 + flag + data2 + '=' +temp;
str += '</span>';
result.innerHTML=str;
}
</script>
</body>
</html>