Html+javascript实现一个简单的计算器，可继续计算

先展示出计算器的大致样子

		

			

				

					

				
				
				

					
=
				
				    
				

					
1
					
2
					
3
					
4
					
5
				
				
				

					
6
					
7
					
8
					
9
					
0
				
				
				

					
.
					
+
					
-
					
*
					
/
				
				
				

					
MR
				
			
		
	

使用CSS修饰

以下为script代码
首先看一下全局变量

var data = [];            //存放点击的数字与运算符
		var str = "";             //将data数组转换为string，用于显示
		var curIndex = 0;         //data[]当前的下标
		var isCal = 0;            //是否计算过，用于二次继续计算

isCal用于记录是否运算过，它帮助我们在结果后继续进行运算，这里设0为第一次计算
1为之前有过一次计算；

然后是点击数字和运算符，用this来获得点击的button值

//点击数字或运算符
		function onClick(v){

	     if(isCal==0){            //判断是否是第一次计算
		  inputCount(v);          
		 }
		  else{
		  	data.length=1;        //存入结果的长度
		  	curIndex = 1;         
		  	data[0] = document.getElementById("content").value;//在data[0]存入结果
		  	inputCount (v); 
		  }

	     }

在上面我们看到了 inputCount(v)这个函数

 //显示点击的数据
		function inputCount (v) {
		  data[curIndex] = v.innerHTML;
		  str = data.join("");
		  curIndex++;
		  document.getElementById("content").value=str;
		}

运算结果，必备的，核心函数是eval();
要考虑除数是0时的结果；

//运算结果
		function equal(){
			var result = eval( document.getElementById("content").value);
			
			if(result.toString()=="Infinity"){          //不可将0作为除数
				alert("除数不可以为0,结果为Infinity");
				changNull();
			}
			else{
			document.getElementById("content").value=result.toString();
			isCal=1;
			}
		}

最后要有清空显示栏
不仅要将显示栏的value变为空，还需要将data[]的长度变为0，当前下标置0；

//清除
		function changNull(){
		   document.getElementById("content").value="";
		   curIndex = 0;
		   data.length=0;
		}

看看效果

继续计算的功能不好展示，自己试试吧