此处是index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculator</title>
<link rel="stylesheet" href="index.css" />
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="calculator">
<input id="inputNum" value="0" disabled="disabled" class="output"/></input>
<div class="numbers">
<input type="button" value="7" onclick="numberClick(value)"/>
<input type="button" value="8" onclick="numberClick(value)"/>
<input type="button" value="9" onclick="numberClick(value)"/>
<input type="button" value="4" onclick="numberClick(value)"/>
<input type="button" value="5" onclick="numberClick(value)"/>
<input type="button" value="6" onclick="numberClick(value)"/>
<input type="button" value="1" onclick="numberClick(value)"/>
<input type="button" value="2" onclick="numberClick(value)"/>
<input type="button" value="3" onclick="numberClick(value)"/>
<input type="button" value="0" onclick="numberClick(value)"/>
<input type="button" value="AC" onclick="cleanClick(value)"/>
<input type="button" value="=" onclick="equalClick(value)"/>
</div>
<div class="operators">
<input type="button" value="*" onclick="operatorsClick(value)"/>
<input type="button" value="-" onclick="operatorsClick(value)"/>
<input type="button" value="+" onclick="operatorsClick(value)"/>
<input type="button" value="/" onclick="operatorsClick(value)"/>
</div>
</div>
</body>
</html>
此处是index.css样式
*{
padding: 0;
margin: 0;
}
.calculator{
width: 405px;
border: solid 1px;
background-color: lightskyblue;
margin: 50px;
padding: 20px;
}
.output{
width: 359px;
padding: 20px;
height: 50px;
font-size: 20px;
text-align: right;
background: white;
}
.numbers{
width: 300px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
input[type=button]{
border: solid 1px white;
background: none;
width: 100px;
height: 80px;
background: gray;
cursor: pointer;
color: white;
font-size: 30px;
}
.operators{
width: 100px;
position: relative;
left: -3px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
此处是JavaScript
// 获取输入框的值
const get = () => {
return document.getElementById("inputNum").value;
};
const set = (value) => {
document.getElementById("inputNum").value = value;
};
// 输入数字
function numberClick(value) {
let val = get();
if (value == "0" && val == "0") {
return;
}
if (val == "0") {
set(value);
} else {
set(val + value);
}
}
//输入字符
function operatorsClick(value) {
let val = get();
// 不可连续输入运算字符
if (val[val.length - 1] == "") {
return;
}
//在显示框显示对应字符
set(val + " " + value + " ");
}
// 清空数据
function cleanClick() {
set("0");
}
// 运算判定是否为空
function equalClick() {
if (get() == "") {
return;
} else {
let cal = new calculator();
cal.number = get().split(" ");
cal.compute();
set(Number.parseInt(cal.back()));
}
}
class calculator {
constructor(value = null) {
// 分割算术数组
this.number = value;
this.result = 0;
}
compute() {
// 计算乘除
this.result = Array.from(this.number);
for (let index = 0; index < this.result.length; index++) {
if (this.result[index] == "*" || this.result[index] == "/") {
// 若是最后输入的字符为运算字符,默认在数组下标index再添加1
if (this.result[index + 1] == "") {
this.result[index + 1] = 1;
}
if (this.result[index] == "*") {
// 删除数组内已计算的数字,并添加计算后面的数字
this.result.splice(+index - 1, 3,+this.result[index - 1] * +this.result[+index + 1]);
} else if (this.result[index] == "/") {
this.result.splice(+index - 1, 3, +this.result[index - 1] / +this.result[+index + 1]);
}
index--;
}
}
// 计算加减
for(let index = 0; index <this.result.length; index++){
if(this.result[index] == "+" || this.result[index] == "-"){
if(this.result[index] == "+"){
//删除数组内已计算的数字,并添加计算后的数字
this.result.splice(+index - 1, 3,+this.result[index - 1]+ +this.result[+index + 1]);
}else if(this.result[index] == "-"){
//删除数组内已计算的数字,并添加计算后的数字
this.result.splice(+index - 1, 3,+this.result[index - 1]- +this.result[+index + 1]);
}
index--;
}
}
// 添加方法:编写数据返回方法
Object.assign(calculator.prototype, {
back() {
return this.result;
}
});
}
}