计算器ajax实现代码,用JQuery写一个计算器

因为觉得segment fault的markdown界面比CSDN漂亮一些，所以最近正在把博客迁移到这边来，这几天多发了两篇.....

作为一个学习中练手的小demo，选了一个计算器。原因大概只是因为早就想做，比较简单，又确实有很多地方不太清楚，所以选了这个玩意，其实看网上的许多源码，做起来不是很难，但是我还是写了差不多一个礼拜，每天中午午休的一个小时加上下班后的1个小时，星期天也弄了差不都一天，终于基本把整体的功能都完成了，后期我想再迭代优化一下，加上一些CSS3的动画和响应式的功能，让这个小demo可以在手机上跑起来。不过这都是后话了。

废话不多说，上代码吧：

在线计算器

*{

margin: 0;

padding: 0;

color: #fff;

font-family: "微软雅黑";

}

.content{

width: 280px;

height: 510px;

margin: 0 auto;

background: #000;

}

.bar {

height: 20px;

width: 100%;

padding-top: 4px;

box-sizing: border-box;

}

.bar .close{

width: 12px;

height: 12px;

border-radius: 50%;

background: red;

text-align: center;

line-height: 10px;

float: right;

color: red;

font-size: 10px;

margin-right: 4px;

cursor: pointer;

}

.bar .close:hover{

color: #fff;

}

.screen{

width: 260px;

margin-left:10px;

line-height: 140px;

text-align: right;

height: 140px;

font-size: 40px;

font-weight: lighter;

overflow: hidden;

}

.btn{

width: 70px;

height: 70px;

background: #ddd;

font-size: 24px;

text-align: center;

line-height: 70px;

float: left;

box-sizing: border-box;

border: 1px solid #000;

cursor: pointer;

}

.btn:nth-of-type(1),

.btn:nth-of-type(2),

.btn:nth-of-type(3){

background: #bbb;

}

.btn:nth-of-type(4n){

background: #ffb51c;

}

.btn:nth-of-type(17){

width: 140px;

}

.btn:nth-of-type(19){

background: #ffb51c;

}

x

AC

+/-

←

÷

7

8

9

×

4

5

6

-

1

2

3

+

0

.

=

$(function(){

var src_show =$(".screen"); //屏幕显示

src_show.html("0");

var result ="", //输出结果

result_1="", //第一个数字

result_2 = ""; //第二个数字

var change=0; //运算符

var num = $(".num"); //数字键

var equal = $(".btn_equal"); //等于符

var calcu = $(".calcu"); //运算符

var reset = $(".btn_reset"); //清零符

var negtive = $(".btn_negtive"), //负号符

neg=1;

var del = $(".btn_delete"); //退格符

//负号操作

negtive.click(function(){

if(src_show.text()=="0"){ //当屏幕显示为0时

src_show.html("-0");

neg=0;

}else if(src_show.text()=="-0"){

src_show.html("0");

neg=1;

}else{ //当屏幕显示不为0

result=src_show.text();

if(neg==0){ //显示为负数时

neg=1;

}else if(neg==1){ //显示为正数时

neg=0;

}

result=-result;

src_show.html(result);

}

})

//数字键

num.click(function(){

result+=$(this).text();

if(neg==0){

src_show.html(-result);

}else{

src_show.html(result);

}

})

//四则运算操作

calcu.click(function(){

result_1=parseFloat(src_show.text());

if($(this).hasClass("btn_plus")){

change=1;

}

if($(this).hasClass("btn_minus")){

change=2;

}

if($(this).hasClass("btn_multiplied")){

change=3;

}

if($(this).hasClass("btn_divided")){

change=4;

}

result="";

src_show.html("0");

neg=1;

});

//等于操作

equal.click(function(){

if(result==""){

result_1=parseFloat(src_show.text());

}else{

result_2 = parseFloat(src_show.text());

}

if(change ==1){

result = result_1+result_2;

}

if(change ==2){

result = result_1-result_2;

}

if(change ==3){

result = result_1*result_2;

}

if(change ==4){

result = result_1/result_2;

}

src_show.html(result);

if(result<0){

neg=0;

}else{

neg=1;

}

result="";

});

//清零符

reset.click(function(){

src_show.html("0");

result ="";

result_1="";

result_2 = "";

change=0;

neg=1;

});

//退格符

del.click(function(){

if(result.length==1||result==""){ //输入一位数退格

result="";

if(neg==1){

src_show.html("0");

}else if(neg==0){

src_show.html("-0");

}

}else{

result=result.substr(0,result.length-1);

if(neg==1){

src_show.html(result);

}else if(neg==0){

src_show.html(-result);

}

}

})

})

代码知识点

因为主要用了JQ的代码，所以知识点主要是JQ的。

1.substr(start，length)：选取一个字符串的指定长度的字符。

start为必须参数，是字符串开始位置的index值，length非必须，指定字符串的长度。这个方法会返回指定的字符串。

2.hasClass(className)：检查元素是否含有指定的类名。

className不需要带“.”。常用if判断；例：

`if($(this).hasClass("btn_plus")){

change=1;

}`

3.其他的代码十分常用，也没有必要一一列出了。

实现原理

由于在网上看的代码太长，理解够呛，所以这个demo基本上是笔者自己的创作，其中某些思想有借鉴网络，但主要的实现皆为本人。

原理是将数字存储为字符串result，按运算符(+-*/)的时候存储字符串result为第一个数字result_1，同时根据按的不同的运算符，赋给变量change不同的值；并且把result清空以便保存第二个字符串。再输入完第二段字符串时，把它再次赋给result，当按等于符的时候，把result赋给result_2；同时，根据change值的不同，进行不同的运算，得出结果，显示在屏幕上。

其中用了大量的if判断，以至于层层叠叠，我都怕会出什么问题......

最后附上我的github地址，如果你觉得对你有帮助的话，请尽情地用fork和star来“羞辱”我吧！

问题

说不上来问题在哪，感觉代码写得太乱，有点随机应变的感觉，没有很好地做到事先规划，有一种头疼医头脚疼医脚的感觉。

1.在处理负号符的时候，导致了result的值有时是字符串，有时又是数字，我的初衷是在处理字符本身的时候始终以字符串的形式存在，当要调整正负和运算的时候再变成数字，可是由于后期的代码变得冗长，导致我自己越来越糊涂，只能应付了事。

2.迭代。我本来希望能在一个礼拜做成一个能在手机使用的小应用，但是由于时间的计划不太合理，前期的基本功能用了太久才完成。后面我想完善起来，结合响应式，这应该不难。

PS：代码经过初步测试，能正常使用。大神发现有什么bug的，欢迎拍砖指点。