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

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


		

使用CSS修饰


Html+javascript实现一个简单的计算器,可继续计算_第1张图片
以下为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;
		}

看看效果
Html+javascript实现一个简单的计算器,可继续计算_第2张图片
继续计算的功能不好展示,自己试试吧

你可能感兴趣的:(Html+javascript实现一个简单的计算器,可继续计算)