今天给大家分享下简易计算机的做法，简易计算机是在JS里面比较综合的一个程序，，在这里逻辑有那么绕，其主要是运算还有就是运算符号的一个问题，话部多说，上代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#content {
margin: 100px auto auto auto;
width: 400px;
height: 500px;
border: 5px solid black;
}
#show {
margin: 10px auto 10px auto;
width: 380px;
height: 80px;
font-size: 40px;
text-align: right;
border: 2px solid black;
line-height: 80px;
font-weight: bolder;
overflow: hidden;
}
* {
padding: 0px;
margin: 0px;
}
ul {
width: 100%;
}
li {
list-style: none;
width: 85px;
height: 85px;
margin-left: 10px;
margin-bottom: 10px;
border: 1px solid red;
float: left;
text-align: center;
line-height: 85px;
font-size: 35px;
border-radius: 20px;
}
li:hover {
background-color: grey;
cursor: pointer;
}
</style>
<script type="text/javascript">
var flag = false
var OPERStr = "+-*/=";
window.onload = function () {
document.onkeydown = fun1;
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
//获得显示框的文档对象
var div = document.getElementById("show");
//获得显示框的文本
var divText = div.textContent;
//获得点击按钮的文本
var liText = this.textContent;
//获得显示框里文本的最后一个字符
var lastChar = divText.charAt(divText.length - 1);
if (liText == "=") {
if (isContent(lastChar, OPERStr)) {
div.innerHTML = divText.substring(0, divText.length - 1)
} else {
var arr = divText.split(/[+-\/*]/);//切出来的数字
var operater = divText.match(/[+-\/*]/);//切出来的操作符
var re = jisuan(parseInt(arr[0]), operater[0], parseInt(arr[1]));
div.innerHTML = re;
}
flag = true;
} else {
//如果显示框里的最后一个字符为（“+-*/=”）其中一个并且当前点击的按钮的文本也为 （“+-*/=”）
//其中一个那么将显示框里的最后一个字符替换为当前点击的按钮的文本。
if (isContent(lastChar, OPERStr) && isContent(liText, OPERStr) && divText.length > 0) {
div.innerHTML = divText.substring(0, divText.length - 1) + liText;
} else {
if (liText == "<-") {
div.innerHTML = ""
} else if ((divText.length == 0 && isContent(liText, OPERStr))
|| (flag && isContent(liText, OPERStr))) {
div.innerHTML = ""
}
else if (flag) {
div.innerHTML = liText;
} else {
div.innerHTML = divText + liText;
}
}
flag = false;
}
}
}
}
function fun1(ee) {
var div = document.getElementById("show");
var divText = div.textContent;
var keyText;
var oper;
if ((ee.keyCode >= 96 && ee.keyCode <= 105)) {
keyText = ee.keyCode - 96;
div.innerHTML = divText + keyText;
} else if ((ee.keyCode >= 48 && ee.keyCode <= 57)) {
keyText = ee.keyCode - 48;
div.innerHTML = divText + keyText;
}
switch (ee.keyCode) {
case 13:
div.innerHTML = eval(divText)
break;
case 107:
if (!isOper(divText))
div.innerHTML = divText + "+";
break;
case 109:
if (!isOper(divText))
div.innerHTML = divText + "-";
break;
case 106:
if (!isOper(divText))
div.innerHTML = divText + "*";
break;
case 111:
if (!isOper(divText))
div.innerHTML = divText + "/";
break;
case 46:
div.innerHTML = "";
break;
case 8:
div.innerHTML = divText.substring(0, divText.length - 1);
}
}
//23423+
function isOper(str) {
return isContent(str.charAt(str.length - 1), OPERStr);
}
function isContent(subStr, str) {
if (str.indexOf(subStr) >= 0) {
return true;
} else {
return false;
}
}
function jisuan(num1, oper, num2) {
switch (oper) {
case "+":
return num1 + num2;
break;
case "-":
return num1 - num2;
break;
case "*":
return num1 * num2;
break;
case "/":
return num1 / num2;
break;
}
}
</script>
</head>
<body>
<div id="content">
<div id="show"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>+</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>-</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>*</li>
<li>0</li>
<li><-</li>
<li>=</li>
<li>/</li>
</ul>
</div>
</body>
在做这个程序的时候特别谨记要分清楚这个符号和数字要切出来方便使用，逻辑要分明，先做那一步后做那一步是很作用的，免得最后忘记你自己写的进程是最痛苦的看，还有如果要求完美的话我们还需要加各种美化，其中计算部分我们并没用EVAL这个函数来做，虽然麻烦点但是这个运算逻辑还是要搞清楚，这样便于我们学习。