纯js制作加减乘除计算器
2018-08-10 本文已影响23人
吃盖浇饭
简易计算机效果图
工作之余，想写个计算器玩玩，搜了一下网上的，发现都很复杂，一个简单的功能引入好多插件，本人不才，自己整了一个，纯js写的。
先上一个写好的代码，看的话，直接新建一个txt文本，后缀改成html就行
文件名例如 1.html就行，然后用浏览器打开直接看效果就行。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>纯js制作计算器</title>
</head>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.count ul {
list-style: none;
width: 400px;
height: 400px;
background: red;
}
.count ul li {
list-style: none;
width: 100px;
height: 100px;
background: blue;
float: left;
text-align: center;
line-height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
.isBig {
width: 400px;
height: 40px;
font-size: 30px;
color: red;
}
</style>
<body>
<div class="count">
<input type="text" name="" value="" class="isBig">
<ul>
<li onclick="isFun(this)">1</li>
<li onclick="isFun(this)">2</li>
<li onclick="isFun(this)">3</li>
<li onclick="isFun(this)">+</li>
<li onclick="isFun(this)">4</li>
<li onclick="isFun(this)">5</li>
<li onclick="isFun(this)">6</li>
<li onclick="isFun(this)">-</li>
<li onclick="isFun(this)">7</li>
<li onclick="isFun(this)">8</li>
<li onclick="isFun(this)">9</li>
<li onclick="isFun(this)">*</li>
<li onclick="isFun(this)">0</li>
<li onclick="isFun(this)">/</li>
<li onclick="isFun(this)">清0</li>
<li onclick="isFun(this)">=</li>
</ul>
</div>
<script type="text/javascript">
var str = 0;
var strm = [];
var isnext = 0;
var isValue = document.getElementsByClassName('isBig')[0];
function isFun(en) {
var e = en.innerHTML;
if (e == "清0") {
isValue.value = "";
str = 0;
strm = [];
isnext = 0;
return;
}
if (e != "+" && e != "=" && e != "-" && e != "*" && e != "/") {
str = Number(str + e)
strm[isnext] = str;
isValue.value = strm.join("");
} else if (e != "=") {
str = 0;
isnext++;
strm[isnext] = e;
isnext++;
isValue.value = strm.join("");
}
if (e == "=") {
var num = 0;
console.log(strm.join(""));
num = eval(strm.join(""));
isValue.value = num;
str = num;
strm = [num];
isnext = 0;
}
}
</script>
</body>
</html>
这个其实想法主要用到了eval这个方法，js自带的算法功能，我在做之前就在想，要想做，先将把数字单独拉出来，然后加减乘除单独拉出来算，最后拉出等号，这样只要思路想通了，后面就简单了。
