HTML5实现简易计算器
闲来⽆聊，⽤H5写了⼀个简易版计算器，只是简单地⼀元运算，功能不多说，直接上代码，注释很详细；(ノ￣▽￣)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.box{width: 290px;height: 470px;margin: 100px auto;border: 1px solid #000;}
.list li{list-style: none;float: left;width:50px;height:50px;margin: 10px;border: 1px solid #999;
border-radius: 10px;background: #eee;cursor: pointer;text-align: center;
line-height: 50px;font-weight: bold;font-size: 25px;}
input{width: 285px;height: 50px;font-size: 20px;text-align: right;outline: none;border: none;padding-right: 5px;}
.txt2{border-bottom: 1px solid #000;}
.list li:hover{background: #888;}
</style>
</head>
<body>
<div class="box">
<input type="text" class="txt1">
<input type="text" class="txt2" value="0">
<ul class="list">
<li>7</li>
<li>8</li>
<li>9</li>
<li>/</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>*</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>-</li>
<li>0</li>
<li>.</li>
<li>=</li>
<li>+</li>
<li>c</li>
</ul>
</div>
<script>
//获取元素
var oTxt1 = ElementsByClassName("txt1")[0];
var oTxt2 = ElementsByClassName("txt2")[0];
var oList = ElementsByClassName("list")[0];
//创建对象，⽤来保存每次输⼊的数和计算符号
var obj = {};
//设置⼀个开关，识别负号和减号
var bStop = false;
//函数执⾏
//计算器
function calculator() {
oList.addEventListener("click", function (e) {
//事件源对象，获取每次点击的内容
var even = e || event;
var target = e.target || e.srcElement;
//保存每次点击的内容
var num = target.innerHTML;
//⼀轮计算之后，第⼆轮输⼊
if (obj.d) {
oTxt1.value = "";
oTxt2.value = "";
obj = {};
obj.d = false;
}
//当输⼊的数值为⼩数，且⽐0还⼩时
if (oTxt2.value === "0" && num != ".") {
oTxt2.value = "";
}
oTxt2.value += num;
//清零
if (num == "c") {
oTxt1.value = "";
oTxt2.value = 0;
obj = {};
}
//获取输⼊的数值
value(num);
}, false)
}
//变量赋值
function value(code) {
//当输⼊为等于号的时候
if (code == "=") {
/
/保存第⼆个输⼊的数
obj.b = parseFloat(oTxt2.value);
oTxt1.value += oTxt2.value;
add(obj);
//当第⼀轮计算结束之后，给⼀个开关，第⼆轮输⼊的时候，
//不需要清零，也不会影响第⼆轮输⼊（以输⼊等号为⼀轮计算结束）                obj.d = true;
//将负号开关重置，不影响下次输⼊
bStop = false;
}
//当连续两次输⼊减号的时候，第⼆次输⼊的为负号，并将开关关上
bStop = false;
return;
}
if (code == "+" || code == "-" || code == "*" || code == "/") {
//在不输⼊等号的情况下，输⼊计算符号也可以计算上⼀轮的结果
if (obj.c) {
obj.b = parseFloat(oTxt2.value);
add(obj);
oTxt1.value = oTxt2.value + code;
oTxt2.value = "";
//将上⼀轮计算的结果保存在下⼀轮的第⼀个数
obj.a = parseFloat(oTxt1.value);
/
/保存计算符号
obj.c = code;
//将负号开关打开
bStop = true;
return;
}
//计算器刚启动的时候或者是⼀轮计算过后，输⼊的第⼀个减号即为负号                if (oTxt2.value == "-") return;
oTxt1.value = oTxt2.value;
oTxt2.value = "";
//保存第⼀个输⼊的数
obj.a = parseFloat(oTxt1.value);
//保存输⼊的计算符号
obj.c = code;
//将负号开关打开
bStop = true;
}
}
//数值计算
function add(obj) {
switch (obj.c) {
case "+":
oTxt2.value = obj.a + obj.b;
break;
case "-":
oTxt2.value = obj.a - obj.b;
break;
case "*":
oTxt2.value = obj.a * obj.b;
break;
case "/":
if (Number.isNaN(obj.a / obj.b)) {
oTxt2.value = "被除数不能为0";
} else {
oTxt2.value = obj.a / obj.b;
}
break;
}
}
</script>
网页计算器html代码
</body>
</html>
效果图：