[JavaScript case]-Use JS to implement a simple calculator
The implementation of a simple calculator has been implemented in C#. In fact, the general principle in JS is the same.
Use C# to implement simple calculator
Using C# Package to Realize Simple Calculator
Don't gossip, go directly to the source code!
HTML source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<!-- js运用外链的方式进行引入 -->
<script src="js/js.js"></script>
</head>
<body>
<!-- 定义一个表单域,并且让他的数值为get -->
<form method="get">
<!-- 定义第一个文本框取名为num1 -->
<input type="number" id="num1">
<!-- 定义一个下拉列表框 -->
<select>
<!-- 然后定义下拉列表框的内容 -->
<option value="加">加</option>
<option value="减">减</option>
<option value="乘">乘</option>
<option value="除">除</option>
</select>
<!-- 定义第二个文本框取名为num2 -->
<input type="number" id="num2">
<!-- 定义一个按钮为等于,触发计算的事件 -->
<input type="button" value="=" id="dengyv">
<!-- 定义第三个文本框取名为max -->
<input type="number" id="max">
</form>
</body>
</html>
JS source code
// js加载(下面这行代码就是只有当HTML页面渲染完毕以后js引擎才会去执行)
window.onload = function () {
// 下面这行代码是获取select的option
// 由于用的是getElementsByTagName所以最后会把option放到一个集合里面
// 所以我们需要使用[0]索引来找到我们需要的符号
var ys = document.getElementsByTagName("select")[0];
// 下面的三个分别是给第一个第二个还有第三个文本框定义一个变量来接收
var n1 = document.getElementById("num1");
var n2 = document.getElementById("num2");
var zong = document.getElementById("max");
// 获取id为等于的button元素
var yi = document.getElementById("dengyv");
// 当button元素被点击的时候触发事件
yi.onclick = function () {
// if语句来判断ys.value是不是加
// 这里的value是HTML页面中option的value值
// 所以我们用==来判断
if (ys.value == "加") {
// 如果判断的结果是加的话 那么就用第一个文本框的值加上第二个文本框的值
// 然后分别把两个值转换成数字来计算
// 最后放到第三个框中，放入的过程使用赋值的方法一个等于
// 最后的显示就会在第三个框中显示
zong.value = parseInt(n1.value) + parseInt(n2.value);
}
else if (ys.value == "减") {
zong.value = parseInt(n1.value) - parseInt(n2.value);
}
else if (ys.value == "乘") {
zong.value = parseInt(n1.value) * parseInt(n2.value);
}
else if (ys.value == "除") {
// 由于要考虑完整所以我们运算除法的时候，我们需要将分母设置为不能为0
// 所以需要嵌套一个if
if (n2.value == 0) {
alert("你个瓜皮!");
} else {
// 然后使用else来显示除法的最后的过程
zong.value = parseInt(n1.value) / parseInt(n2.value);
}
}
}
}