呈上html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>智障计算器</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="stylesheet" href="./css/main.less" />
<script src="./js/vue.js"></script>
<script src="./js/jquery.js"></script>
<style>
body,
html{
width: 100%;
height: 100%;
}
#app {
background: #323846;
width: 100%;
height: 100%;
position: fixed;
}
* {
padding: 0;
margin: 0;
}
p {
height: 25%;
}
.result {
width: 100%;
height: 20%;
text-align: center;
background: #7e75f4;
font-size: 100%;
color: aliceblue;
text-align: left;
padding: 10px;
box-sizing: border-box;
}
.btnKuang {
width: 100%;
height: 80%;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.btnKuang div {
box-sizing: border-box;
width: 25%;
text-align: center;
padding: 25px;
font-size: 200%;
color: aliceblue;
}
</style>
</head>
<body>
<div id="app">
<div class="result">
<p>您输入的数字：</p>
<p id="number"></p>
<p>所得到的结果：</p>
<p>{{showResult}}</p>
</div>
<div class="btnKuang">
<div @click="clear()">AC</div>
<div @click="addNum(1)">1</div>
<div @click="addNum(2)">2</div>
<div @click="addNum(3)">3</div>
<div @click="addition()">＋</div>
<div @click="addNum(4)">4</div>
<div @click="addNum(5)">5</div>
<div @click="addNum(6)">6</div>
<div @click="subtraction()">－</div>
<div @click="addNum(7)">7</div>
<div @click="addNum(8)">8</div>
<div @click="addNum(9)">9</div>
<div @click="multiplication()">×</div>
<div @click="division()">÷</div>
<div @click="addNum(0)">0</div>
<div @click="addNum('.')">.</div>
<div @click="result()">＝</div>
</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>js代码：
var app = new Vue({
el: "#app",
data: {
numValue: null, //输入的数值
first: null, //第一位数的值
showResult: null, //显示的结果
Symbols: 0, //使用第几个运算方法
},
methods: {
//归零
clear() {
this.showResult = null;
this.Symbols = 0;
// this.clearArray();
$("#number").html('');
},
addNum(i) {
//显示输入的数值
var temp = $("#number").html();
$("#number").html("");
$("#number").append(temp + i);
this.num.push(i);
},
//获取数值
numString() {
//直接把字符串转成数值
this.numValue = parseFloat($("#number").html());
},
//计算符号之前的结果
Caculation() {
this.numString();
if (this.numValue > 0) {
//若存在则获得输入的数值
//判断第一位数是否为空
if (this.first != null) {
//若不为空，则根据这个数组之前的符合运算;
if (this.Symbols == 1) {
//+
this.first = this.first + this.numValue;
} else if (this.Symbols == 2) {
//-
this.first = this.first - this.numValue;
} else if (this.Symbols == 3) {
//*
this.first = this.first * this.numValue;
} else if (this.Symbols == 4) {
// /
this.first = this.first / this.numValue;
} else if (this.Symbols == 0) {
//无符号
this.first = this.numValue;
}
} else {
this.first = this.numValue;
}
} else {
//若符号前没有数组，则第一位数为上一轮的结果。
$("#number").html('');
console.log(`符号前面没有数字不运算；结束运算过程；`);
this.first = this.showResult;
return;
}
//显示符号之前的运算结果；
this.showResult = this.first;
console.log(`符号前面有数字，之前的结果为：` + this.showResult);
},
//加法
addition() {
this.Caculation();
$("#number").append(this.showResult);
$("#number").html(''); //清空输入的部分
this.Symbols = 1;
},
//减法
subtraction() {
this.Caculation();
$("#number").append(this.showResult);
$("#number").html('');
this.Symbols = 2;
},
//乘法
multiplication() {
this.Caculation();
$("#number").append(this.showResult);
$("#number").html('');
this.Symbols = 3;
},
//除法
division() {
this.Caculation();
$("#number").append(this.showResult);
$("#number").html('');
this.Symbols = 4;
},
//等于
result() {
this.showResult = this.first;
this.Caculation();
this.Symbols = 0;
$("#number").html('');
}
}
});效果图显示：
点击该地址可以预览一下哦。
https://chenyating.github.io/Mental-retardation-calculator/.
