能够实现简单的加减乘除等操作,以及全部清除和返回上一步操作。
<!DOCTYPE html>
<html>
<head>
<title>简易计算器js</title>
<style>
.computer {
width: 400px;
height: 250px;
}
.showView {
height: 30px;
width: 370px;
border: 1px solid grey;
margin-left: 10px;
}
.pressButton {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 10px;
}
.keyBoard {
border: 1px solid black;
background-color: ghostwhite;
color: black;
height: 50px;
width: 50px;
cursor: pointer;
text-align: center;
}
</style>
<script>
var num1 = 0;
var num2 = 0;
var operator = "";
function printNum(atr) {
let number = document.getElementById(atr).value;
document.getElementById("show").value += number;
}
function clearNum() {
document.getElementById("show").value = null;
document.getElementById("show").focus();
}
function goBack() {
document.getElementById("show").value = document.getElementById("show").value.substring(0,document.getElementById("show").value.length - 1);
}
function opration(atr) {
let view = document.getElementById("show").value;
num1 = view;
operator = document.getElementById(atr).value;
document.getElementById("show").value = null;
}
function getResult() {
num2 = document.getElementById("show").value;
switch(operator) {
case "X" :
document.getElementById("show").value = num1 * num2;
break;
case "+" :
let addResult = Number(num1) + Number(num2);
document.getElementById("show").value = addResult;
break;
case "-" :
document.getElementById("show").value = num1 - num2;
break;
case "/" :
document.getElementById("show").value = num1 / num2;
break;
default:
document.getElementById("show").value = num1 % num2;
}
}
</script>
</head>
<body>
<div class="computer">
<input type="text" id="show" class="showView"></input>
<div class="pressButton">
<input type="text" id="7" value="7" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="8" value="8" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="9" value="9" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="back" value="Back" onclick="goBack()" class="keyBoard" readOnly="true"></input>
<input type="text" id="c" value="C" onclick="clearNum()" class="keyBoard" readOnly="true"></input>
</div>
<div class="pressButton">
<input type="text" id="4" value="4" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="5" value="5" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="6" value="6" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="*" value="X" onclick="opration(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="/" value="/" onclick="opration(this.id)" class="keyBoard" readOnly="true"></input>
</div>
<div class="pressButton">
<input type="text" id="1" value="1" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="2" value="2" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="3" value="3" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="+" value="+" onclick="opration(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="-" value="-" onclick="opration(this.id)" class="keyBoard" readOnly="true"></input>
</div>
<div class="pressButton">
<input type="text" id="0" value="0" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="00" value="00" onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="." value="." onclick="printNum(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="%" value="%" onclick="opration(this.id)" class="keyBoard" readOnly="true"></input>
<input type="text" id="=" value="=" onclick="getResult()" class="keyBoard" readOnly="true"></input>
</div>
</div>
</body>
</html>