簡易計算機效果圖
工作之余，想寫個計算器玩玩，搜了一下網(wǎng)上的，發(fā)現(xiàn)都很復(fù)雜，一個簡單的功能引入好多插件，本人不才，自己整了一個，純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自帶的算法功能，我在做之前就在想，要想做，先將把數(shù)字單獨拉出來，然后加減乘除單獨拉出來算，最后拉出等號，這樣只要思路想通了，后面就簡單個呢。
