您的位置：首页 > Web前端 > JavaScript

js完成一个简易计算器

2016-11-29 21:26 85 查看
第一次写这样的东西，找不到思路。用原生js码了一堆字，输入结果，不对再改。反反复复，还是不对。

之后用了eval，写出的代码是少了很多，但思路还是没变。（一般最大的问题就在这）

最后是分存储器和计算器显示屏两部分来完成（之前敲代码的时候写来写去就是这两块，同时写这两部分，我思维特别混乱）

先写的是存储器部分（存储器的运算结果需要显示在显示码上），写完存储器部分之后，举了一个含有多运算符多位数的运算例子，找规律来写存储器和显示器的结合部分。

好在写例子的时候没有走什么弯路：

写一个15*10的表达式，这样拆分：

一：先列出前三列，包含着你给计算器写入的数以及你希望计算机显示的数，还有string值（写存储器部分是string起很大作用）。

二：后几列是你为了达到前三列的效果想方设法写出的参数。

三：最后根据参数找规律，将找到的规律填到列出的表格上，看能否实现表格中的逻辑

四：不要忘记按下等于键之后，将flag、variant设为最初的值。

入显string传进的flagvariant显示后flag后variant
111false0stringfalse0
51515false0stringfalse0
*1515*false0evaltrue1
1115*1true1numtrue2
01015*10true2value+numtrue3
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calculator</title>
<meta name="viewport" content="width=device-width,initial-scale=1"
/>
<style>
.container {
display: flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
height: 50rem;
}
.calculator {
display: flex;
flex-direction: column;
width: 20rem;
background: #000;
}
.result {
font-size: 4.5rem;
padding-top: 4.5rem;
text-align: right;
color: #FFF;
}
.keys {
display: flex;
flex-wrap: wrap;
background: #BBBBBB;
font-size: 1.5rem;
}
.key {
width: 25%;
box-sizing: border-box;
text-align: center;
color: #FFF;
padding: 1.5rem;
border: 1px solid #000;
}
.key-zero {
display: flex;

4000
flex-grow: 2;
text-align: left;
}
.key:nth-child(4n) {
background: #F98810;
}
.key:last-child {
background: #F98810;
}
.key:active {
box-shadow: 2px 2px 10px #666 inset;
}
.key:hover {
background: #C6C7C9;
}
.key:nth-child(4n):hover {
background: #D96D00;
}
</style>
</head>
<body>
<div class="container">
<div class="calculator">
<div class="result" id="screen">0</div>
<div class="keys" id="menu">
<div class="key" id="reset">AC</div>
<div class="key" id="inverse">+/-</div>
<div class="key ">%</div>
<div class="key operator">÷</div>
<div class="key number">7</div>
<div class="key number">8</div>
<div class="key number">9</div>
<div class="key operator">×</div>
<div class="key number">4</div>
<div class="key number">5</div>
<div class="key number">6</div>
<div class="key operator">-</div>
<div class="key number">1</div>
<div class="key number">2</div>
<div class="key number">3</div>
<div class="key operator">+</div>
<div class="key key-zero number">0</div>
<div class="key ">.</div>
<div class="key">=</div>
</div>
</div>
</div>

<script>
window.onload = function() {

var screen = document.getElementById('screen');
var reset = document.getElementById('reset');
var inverse = document.getElementById('inverse');
var menu = document.getElementById('menu');

var string = '';
var variant = 0;
var keys = menu.getElementsByTagName('div');
for (var i=0 ; i<keys.length ; i++) {
var flag = false;
keys[i].onclick = function() {
var num = this.firstChild.nodeValue;
var value = screen.firstChild.nodeValue;

/*存储器部分
if (num == '=') {
console.log(string);
var result = eval(string);
string = result;
screen.firstChild.nodeValue = result;
} else if(num == '%') {
var result = eval(string);
screen.firstChild.nodeValue = result/100;
} else if (this.className.match(new RegExp("(\\s||^)" + "operator" + "(\\s||$)")) || this.className.match(new RegExp("(\\s||^)" + "number" + "(\\s||$)"))){
if (num == '×') num='*';
if (num == '÷') num='/';
string = string + num;
console.log(string);
}*/

//存储器和显示码结合
if (num == '=') {
console.log(string);
var result = eval(string);
string = result;
screen.firstChild.nodeValue = result;
variant = 0;
} else if(num == '%') {
var result = eval(string);
screen.firstChild.nodeValue = result/100;
} else if (this.className.match(new RegExp("(\\s||^)" + "number" + "(\\s||$)"))){
string = string + num;
if (flag == false) {
screen.firstChild.nodeValue = eval(string);
}   else {
if (variant == 1) {
screen.firstChild.nodeValue = num;
} if (variant >= 2) {
screen.firstChild.nodeValue = value + num;
}
variant++;
}

} else if (this.className.match(new RegExp("(\\s||^)" + "operator" + "(\\s||$)"))) {
string = eval(string);
screen.firstChild.nodeValue = string;
flag = true;
variant = 1;
if (num == '×') num='*';
if (num == '÷') num='/';
string = string + num;
}
}
}

/*清零功能*/
reset.onclick = function(){
var value = screen.firstChild.nodeValue;
if (value != 0) {
screen.firstChild.nodeValue = 0;
reset.firstChild.nodeValue = "AC";
}
string = '';
variant = 0;
flag = false;
}

/*正负数转换功能*/
inverse.onclick = function(){
var value = screen.firstChild.nodeValue;
if (value > 0) {
value = value-2*value;
} else if (value < 0) {
value = Math.abs(value);
} else {
if (value=='0') {
value='-'+0;
} else {
value = 0;
}
}
screen.firstChild.nodeValue = value;
}
}

</script>
</body>
</html>


总结：

1.列出你想要实现的效果，逻辑复杂就分块完成。逻辑清晰一些就可以动手完成，若写了一部分逻辑还是很混乱，回过来重新总结逻辑部分，

这样完成的更快。

2.没有思路的时候参考他人想法，快速获得反馈。或者缓两天再写。

3.完善代码，可以合并的地方就合并到一块。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  计算器 javascript
相关文章推荐
新的分享
章节导航