简易计算器

闲着没事，在用到计算器的时候就想自己写一个，写的比较仓促，就写了一个简易的

功能：

实现了两个数的加、减、乘、除、求余运算,如果你是多个数运算的话，请你先计算两个数，接着与下面的数计算

效果图：

无忧

结构代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<body>
	<div class="box">
		<div>
			<ul>
				<li class="data_cha"><span>x</span></li>
				<li><span>-</span></li>
				<li><span>+</span></li>
			</ul>
			<input type="text" disabled placeholder="0">
		</div>
		<table cellspacing="0" cellpadding="0">
			<tr>
				<td>AC</td>
				<td>+/-</td>
				<td class="yunsuanfu">%</td>
				<td class="yunsuanfu">&divide;</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td class="yunsuanfu">&times;</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td class="yunsuanfu">-</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td class="yunsuanfu">+</td>
			</tr>
			<tr>
				<td colspan="2">0</td>
				<td>.</td>
				<td>=</td>
			</tr>
		</table>
	</div>
</body>

js部分

用到了一点es6的语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
function $(x){
	return document.querySelector(x);
}
function $1(y){
	return document.querySelectorAll(y);
}
//点击x 计算器关闭
var data_cha=$('.data_cha');
var box = $('.box');
data_cha.onclick=function(){
	box.style.display='none';
}
//点击 显示 背景效果 及建立交互
var bg=$1('td');
var length=bg.length;
var input=$('input')
for(var i=0;i<length;i++){
	bg[i].index=i;
	bg[i].onmousedown=function(){
		if ((this.index)%4==3||(this.index)==length-1 ){			bg[this.index].style.backgroundColor='gray';
		}else if (this.index==1||this.index==2||this.index==0) {
			bg[this.index].style.backgroundColor='gray';
		}else{bg[this.index].style.backgroundColor='gray';
			 nput.value=input.value
			 +''+bg[this.index].innerHTML;
			bg[0].innerHTML="C";
			//正负 点击一下为负，再次点击为正	
			var n=0;
			bg[1].onclick=function(){
				n++;
				var kong='';
				if (n%2==1) {
					return input.value="-"+input.value;
				}else{
					for(i=1;i<input.value.length;i++){
						kong+=input.value[i];
					}
					return input.value=kong;
				}
			}
		}	
	}
	bg[i].onmouseup=function(){
		bg[this.index].style.backgroundColor='';	
	}
}
//点击C的时候变AC 并使文本框输入为空
bg[0].onclick=function(){
	bg[0].innerHTML="AC";
	return input.value='';
}
bg[16].onclick=function(){
	if (input.value[0]==0) {
		return input.value=input.value[0];
	}
} 
//输入值
function shuru(){
	 var num=Number(input.value);
	 return num;
}
//加减乘除定义 并取第一次输入值
var yunsuanfu=$1('.yunsuanfu');
var x,y,opt;
yunsuanfu[0].onclick=function(){
		opt="%";
		x =shuru();
		input.value='';
	}
yunsuanfu[1].onclick=function(){
		opt="&divide;";
		x =shuru();
		input.value='';
	}
yunsuanfu[2].onclick=function(){
		opt="&times;";
		x =shuru();
		input.value='';
	}
yunsuanfu[3].onclick=function(){
		opt="-";
		x =shuru();
		input.value='';
	}
yunsuanfu[4].onclick=function(){
		opt="+";
		x =shuru();
		input.value='';
	}
bg[18].onclick=function(){
		y=shuru();//取第二次输入值
	if (opt=="%") {input.value=x%y;}
	else if(opt=="-"){input.value=x-y;}
	else if(opt=="+"){input.value=x+y;}
	else if(opt=="&times;"){input.value=x*y;}
	else if(opt=="&divide;"){input.value=x/y;}
}

如有需要查看全部代码，请前往:My github

JavaScript
很惭愧<br><br>只做了一点微小的工作<br>谢谢大家