用来js写了一个简单的计算器,得益于jquery的便捷性,很少的代码就可以实现。
演示地址:https://maaici.github.io/JS_Calculator/
以下是js源码
//计算结果变量
var resault = 0;
//前一个按下的运算符
var op = "";
//输入的数字是否从头开始
var isNew = false;
$(function () {
$("#txt").val('0');
//绑定按钮事件
//数字输入按钮事件
$(".number").click(function () {
if (isNew && this.value != "+/-") {
$("#txt").val('0');
isNew = !isNew;
}
var currNum = $("#txt").val();
if (!isNaN(this.value)) //输入的是数字
{
if (this.value == 0 && currNum == "0") {
$("#txt").val('0');
} else if (this.value != 0 && currNum == "0") {
$("#txt").val(this.value);
}
else {
$("#txt").val(currNum + this.value);
}
} else if (this.value == "+/-")//输入的是负号
{
$("#txt").val(0 - parseFloat($("#txt").val()));
} else if (this.value == "." && currNum.indexOf(".") == -1)//输入的是小数点 并且 当前输入的数字中不包含小数点
{
$("#txt").val(currNum + this.value);
}
});
//操作符
$(".op").click(function () {
getResault();
op = this.value;
isNew = true;
});
//cancel (相当于归零操作)
$("#btn_can").click(function () {
$("#txt").val("0");
op = "=";
isNew = false;
resault = 0;
});
//clean (只清除掉当前输入的数据,不影响上次保存的记录)
$("#btn_cle").click(function () {
$("#txt").val("0");
});
//del (删掉前一个输入的数字部分,即在显示框的数字最后一位删掉,如果的话)
$("#btn_del").click(function () {
var currStr = $("#txt").val();
if (currStr.length == 1) {
$("#txt").val("0");
} else {
$("#txt").val(currStr.substr(0, currStr.length - 1));
}
});
});
//计算结果
function getResault() {
//js不能精准表示浮点数,为了保证结果的准确性,先将数字扩大 再将结果缩小
var zoomNum = 10000;//缩放系数(可以按需调整)
resault = parseFloat(resault);
if (op == "+") {
resault = resault * zoomNum + parseFloat($("#txt").val()) * zoomNum;
resault = resault / zoomNum;
} else if (op == "-") {
resault = resault * zoomNum - parseFloat($("#txt").val()) * zoomNum;
resault = resault / zoomNum;
} else if (op == "*") {
resault = (resault * zoomNum) * (parseFloat($("#txt").val()) * zoomNum);
resault = resault / zoomNum / zoomNum;
} else if (op == "/") {
if (parseFloat($("#txt").val()) == 0) {
resault = 0;
} else {
resault = (resault * zoomNum) / (parseFloat($("#txt").val()) * zoomNum);
}
} else {
resault = $("#txt").val();
}
$("#txt").val(resault);
}
html代码:
<!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>Common</title>
<style>
.btn{
width: 80px;
height: 50px;
margin: 5px;
font-size:18px;
border-bottom: darkslategrey
}
</style>
<script src="/js/jquery-3.3.1.js"></script>
<script src="/js/Common.js"></script>
</head>
<body>
<div style="align-content: center">
<div>
<table id="Ca" style="height:100%;width: 600px;display: block">
<tbody style="background-color: slategrey">
<tr>
<td colspan="4" style="text-align:center">
<h2>简 单 计 算 器</h1>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:right">
<div style="width:100%">
<input type="text" id="txt" style="height:30px;width:360px;margin:
5px;text-align: right;font-size: 26px">
</div>
</td>
</tr>
<tr>
<td><input class="btn" type="button" id="btn_can" value="Cancel"></td>
<td><input class="btn" type="button" id="btn_cle" value="Clean"></td>
<td><input class="btn" type="button" id="btn_del" value="Del"></td>
<td><input class="btn op" type="button" id="btn_add" value="+"></td>
</tr>
<tr>
<td><input class="btn number" type="button" id="btn_1" value="1"></td>
<td><input class="btn number" type="button" id="btn_2" value="2"></td>
<td><input class="btn number" type="button" id="btn_3" value="3"></td>
<td><input class="btn op" type="button" id="btn_reduce" value="-"></td>
</tr>
<tr>
<td><input class="btn number" type="button" id="btn_4" value="4"></td>
<td><input class="btn number" type="button" id="btn_5" value="5"></td>
<td><input class="btn number" type="button" id="btn_6" value="6"></td>
<td><input class="btn op" type="button" id="btn_x" value="*"></td>
</tr>
<tr>
<td><input class="btn number" type="button" id="btn_7" value="7"></td>
<td><input class="btn number" type="button" id="btn_8" value="8"></td>
<td><input class="btn number" type="button" id="btn_9" value="9"></td>
<td><input class="btn op" type="button" id="btn_c" value="/"></td>
</tr>
<tr>
<td><input class="btn number" type="button" id="btn_f" value="+/-"></td>
<td><input class="btn number" type="button" id="btn_0" value="0"></td>
<td><input class="btn number" type="button" id="btn_point" value="."></td>
<td><input class="btn op" type="button" id="btn_as" value="="></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
以上是全部代码,发现bug请告诉我哦。