![[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
以下代码是基于JavaScript知识的DOM与事件操作基础所实现的案例，综合运用了这些知识，其中还包括css样式的控制：
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style type="text/css">
.box {
width: 500px;
height:250px;
background-color: #efefef;
border: 1px solid lightgrey;
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: 100%;
height: 100%;
border: none;
background-color: skyblue;
color: white;
}
button:hover {
cursor: pointer;
background-color:coral;
width: 110%;
height: 110%;
}
</style>
</head>
<body>
<div class="box">
<h2>计算器</h2>
<form>
<table>
<tr>
<td><input type="text" name="opt1" placeholder="操作数1"></td>
<td>
<select name="option" id="">
<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 align="right"><h3>结果：</h3></td>
<td align="left" colspan="3"><h3 id="result"></h3></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
//获取操作数，按钮，结果占位符
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();
opt1.value = '';
return false;
} else if(opt2.value.length === 0){
alert('第二个操作数不能为空');
opt2.focus();
return false;
} else if(isNaN(opt2.value)) {
alert('第二个操作数必须为数字');
opt2.focus();
opt2.value = '';
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 = '/';
if (data2 === 0){
alert('除数不能为零');
opt2.focus();
opt2.value = '';
return false;
}else {
temp = data1 / data2;
//四舍五入，仅保留两位小数
temp = Math.round(temp * 100) / 100;
}
break;
}
let str ='<span style="color:coral;">' + data1+' '+flag + ' ' + data2 +' = ' + temp + '</span>';
result.innerHTML = str;
}
</script>
</body>
</html>以上代码主要中js实现了一个功能完整的计算器案例，其中包括计算器样式的简单设计，使用css()，以及在js脚本中对页面元素的获取方式，这里总结为以下几点：
（1）通过属性名获取：document.getElementsByName（'属性名'）；
（2）通过标签获取：document.getElementsByTagName（'标签'）；
（3）通过class获取：document.getElementByClass ('Class')；
（4）通过Id获取：document.getElementById ('Id')；
以及如何给按钮添加事件，这里只添加了一个点击事件，另外还有好多事件可以添加，包括鼠标移入，移出等等，
最后还包括如何动态的把内容添加到页面文档中显示给用户，所用属性名就是innerHTML。
