编程: 使用js完成一个功能相对完整的计算器案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单四则运算器</title>
</head>
<body>
<div>
<form action="">
<table>
<caption>计算器</caption>
<tr>
<td><input type="text" name="no1" placeholder="运算数1"></td>
<td><select name="option" id="">
<option value="null">请选择运算符</option>
<option value="sum">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
</td>
<td><input type="text" name="no2" placeholder="运算数2"></td>
<td><button type="button">计算</button></td>
</tr>
<tr>
<td>结果：</td>
<td id="result"></td>
</tr>
</table>
</form>
</div>
<!--用js操作HTML的思路：1.通过 name属性、id、tag等得到相应的对象2.通过函数等对对象的属性添加行为-->
<script>
//1. 通过DOM的方法获得HTML对象
let no1 = document.getElementsByName('no1')[0];//通过ByName获得是对象数组，在这里得到是以no1为name的input的数组对象 ，这里数组仅一个数据
let no2 = document.getElementsByName('no2')[0];
let option = document.getElementsByName('option')[0];
let btn = document.getElementsByTagName('button')[0]; //elements 都是复数，还是数组
let result = document.getElementById('result'); //id 唯一性，这个仅一个对象
// 2. 添加事件
btn.onclick = function (){
//初始化运算数
let data1 = 0;
let data2 = 0;
// 对运算数进行非空及非数字类型判断
if (no1.value.length === 0){
alert ('第一个运算数不能为空！')
no1.focus();
// return false; // 用来阻止浏览器的默认行为，但是这里，搞不懂，这是个判断语句，不符合要求自然不会执行啊
} else if (isNaN(no1.value)) {
alert ('请输入数字!');
} else if (no2.value.length === 0){
alert ('请输入第二个运算数！');
no2.focus();
} else if (isNaN(no2.value)){
alert('第二个运算数必须是数字')
no2.focus();
} else {
data1 = parseFloat(no1.value);
data2 = parseFloat(no2.value);
}
// 判断运算符
let options = option.value; //获取运算符
let temp = 0 ;//设置一个临时变量，存储运算结果
let flag = ''; //设置一个标识符
switch (options) {
case 'null':
alert('请选择适当运算符');
option.focus();
break;
case 'sum':
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('运算数2，除数不能为零，你不知道吗？？')
no2.focus();
no2.value = ''; //获取聚焦，并清空
return false;
} else {
temp = data1 / data2;
temp = Math.round(temp *100) /100 ;//Math.round（No）是把一个数舍入最接近的数字，先乘以100在除以100是为了取2位小数
}
break;
}
result.innerHTML = temp;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
