简易计算机效果图
工作之余, 想写个计算器玩玩, 搜了一下网上的, 发现都很复杂, 一个简单的功能引入好多插件, 本人不才, 自己整了一个, 纯 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 自带的算法功能, 我在做之前就在想, 要想做, 先将把数字单独拉出来, 然后加减乘除单独拉出来算, 最后拉出等号, 这样只要思路想通了, 后面就简单了.
来源: http://www.jianshu.com/p/7d3175e63b60