一个简易计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
.container {
margin: 0 auto;
width: 500px;
height: 500px;
margin-top: 50px;
}
td:nth-child(1) {
width: 80px;
}
td:nth-child(2) {
width: 80px;
}
td:nth-child(3) {
width: 80px;
}
td:nth-child(4) {
width: 80px;
}
.box {
height: 40px;
text-align: center;
line-height: 40px;
color: aliceblue;
}
div {
margin-right: 8px;
}
input {
width: 313px;
height: 50px;
color: #F0F8FF;
background-color: #000000;
font-size: 25px;
text-align: right;
}
td {
padding-bottom: 5px;
}
.box_set_color {
background-color: dimgrey;
}
.box_num_color {
background-color: mediumblue;
}
.box_num_color_d {
background-color: mediumblue;
}
.box_algo_color {
background-color: darkgoldenrod;
}
.box_equal_color {
background-color: coral;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td colspan="4"><input type="text" id="txt" /></td>
</tr>
<tr>
<td>
<div class="box box_set_color storage">存储</div>
</td>
<td>
<div class="box box_set_color read">存取</div>
</td>
<td>
<div class="box box_set_color return">退格</div>
</td>
<td>
<div class="box box_set_color empty">清屏</div>
</td>
</tr>
<tr>
<td>
<div class="box box_num_color">7</div>
</td>
<td>
<div class="box box_num_color">8</div>
</td>
<td>
<div class="box box_num_color">9</div>
</td>
<td>
<div class="box box_algo_color">/</div>
</td>
</tr>
<tr>
<td>
<div class="box box_num_color">4</div>
</td>
<td>
<div class="box box_num_color">5</div>
</td>
<td>
<div class="box box_num_color">6</div>
</td>
<td>
<div class="box box_algo_color">x</div>
</td>
</tr>
<tr>
<td>
<div class="box box_num_color">1</div>
</td>
<td>
<div class="box box_num_color">2</div>
</td>
<td>
<div class="box box_num_color">3</div>
</td>
<td>
<div class="box box_algo_color">+</div>
</td>
</tr>
<tr>
<td>
<div class="box box_num_color">0</div>
</td>
<td>
<div class="box box_num_color_d">.</div>
</td>
<td>
<div class="box box_equal_color">=</div>
</td>
<td>
<div class="box box_algo_color">-</div>
</td>
</tr>
</table>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
//数字
$(".box_num_color").click(function() {
var temp = $("#txt").val() + $(this).text() + "";
if (Number(temp) == Number($(this).text())) {
$("#txt").val($(this).text());
} else {
$("#txt").val(temp);
}
})
//逗号
$(".box_num_color_d").click(function() {
// var temp=$("#txt").val()+$(this).text()+"";
// $("#txt").val(temp);
var add = $("#txt").val().indexOf("+");
var reduce = $("#txt").val().indexOf("-");
var ride = $("#txt").val().indexOf("x");
var except = $("#txt").val().indexOf("/");
var val = $("#txt").val();
if (add != -1) {
val = val.split("+"); //获取第二位数
if (val[1].indexOf(".") == -1 && val[1].length > 0) { //判断是否有点 点是不是在第一位
var temp = $("#txt").val() + $(this).text() + "";
$("#txt").val(temp);
}
} else if (reduce != -1) {
val = val.split("-");
if (val[1].indexOf(".") == -1 && val[1].length > 0) {
var temp = $("#txt").val() + $(this).text() + "";
$("#txt").val(temp);
}
} else if (ride != -1) {
val = val.split("x");
if (val[1].indexOf(".") == -1 && val[1].length > 0) {
var temp = $("#txt").val() + $(this).text() + "";
$("#txt").val(temp);
}
} else if (except != -1) {
val = val.split("/");
if (val[1].indexOf(".") == -1 && val[1].length > 0) {
var temp = $("#txt").val() + $(this).text() + "";
$("#txt").val(temp);
}
} else {
if (val.indexOf(".") == -1) {
if (val.length > 0) {
var temp = $("#txt").val() + $(this).text() + "";
$("#txt").val(temp);
} else {
var temp = 0+ $(this).text() + "";
$("#txt").val(temp);
}
}
}
})
//算法
$(".box_algo_color").click(function() {
var add = $("#txt").val().indexOf("+");
var reduce = $("#txt").val().indexOf("-");
var ride = $("#txt").val().indexOf("x");
var except = $("#txt").val().indexOf("/");
var val = $("#txt").val();
if (add != -1) {
val = val.split("+");
val = Number(val[0]) + Number(val[1]);
$("#txt").val("");
var temp = val + $(this).text() + "";
$("#txt").val(temp);
} else if (reduce != -1) {
val = val.split("-");
val = Number(val[0]) - Number(val[1]);
$("#txt").val("");
var temp = val + $(this).text() + "";
$("#txt").val(temp);
} else if (ride != -1) {
val = val.split("x");
val = Number(val[0]) * Number(val[1]);
$("#txt").val("");
var temp = val + $(this).text() + "";
$("#txt").val(temp);
} else if (except != -1) {
val = val.split("/");
val = Number(val[0]) / Number(val[1]);
$("#txt").val("");
var temp = val + $(this).text() + "";
$("#txt").val(temp);
} else {
var temp = $("#txt").val() + $(this).text() + "";
$("#txt").val(temp);
}
});
//结果
$(".box_equal_color").click(function() {
var add = $("#txt").val().indexOf("+");
var reduce = $("#txt").val().indexOf("-");
var ride = $("#txt").val().indexOf("x");
var except = $("#txt").val().indexOf("/");
var val = $("#txt").val();
if (add != -1) {
val = val.split("+");
val = Number(val[0]) + Number(val[1]);
$("#txt").val("");
$("#txt").val(val);
} else if (reduce != -1) {
val = val.split("-");
val = Number(val[0]) - Number(val[1]);
$("#txt").val("");
$("#txt").val(val);
} else if (ride != -1) {
val = val.split("x");
val = Number(val[0]) * Number(val[1]);
$("#txt").val("");
$("#txt").val(val);
} else if (except != -1) {
val = val.split("/");
val = Number(val[0]) / Number(val[1]);
$("#txt").val("");
$("#txt").val(val);
} else {
$("#txt").val(val);
}
});
//清屏
$(".empty").click(function() {
$("#txt").val("");
});
//退格
$(".return").click(function() {
var val = $("#txt").val();
if (val != "") {
val = val + '';
val = val.substring(0, val.length - 1);
$("#txt").val(val);
}
});
var arr = [];
//存储
$(".storage").click(function() {
var val = $("#txt").val();
arr[0] = val;
})
//存取
$(".read").click(function() {
if (arr[0] != undefined) {
$("#txt").val("");
$("#txt").val(arr[0]);
}
});
</script>
</body>
</html>