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

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

<body>
		<div id="main">
			<table frame="box" rules="all">
				<tr>
					<td colspan="5" ><input type="text" id="content" readonly="readonly"/></td>
				</tr>
				
				<tr>
					<td colspan="5"><button class="long" onclick="equal()">=</button></td>
				</tr>
				    
				<tr>
					<td><button onclick="onClick(this)">1</button></td>
					<td><button onclick="onClick(this)">2</button></td>
					<td><button onclick="onClick(this)">3</button></td>
					<td><button onclick="onClick(this)">4</button></td>
					<td><button onclick="onClick(this)">5</button></td>
				</tr>
				
				<tr>
					<td><button onclick="onClick(this)">6</button></td>
					<td><button onclick="onClick(this)">7</button></td>
					<td><button onclick="onClick(this)">8</button></td>
					<td><button onclick="onClick(this)">9</button></td>
					<td><button onclick="onClick(this)">0</button></td>
				</tr>
				
				<tr>
					<td><button onclick="onClick(this)">.</button></td>
					<td><button onclick="onClick(this)">+</button></td>
					<td><button onclick="onClick(this)">-</button></td>
					<td><button onclick="onClick(this)">*</button></td>
					<td><button onclick="onClick(this)">/</button></td>
				</tr>
				
				<tr>
					<td colspan="5"><button class="long" onclick="changNull()">MR</button></td>
				</tr>
			</table>
		</div>
	</body>

使用CSS修饰

<style type="text/css">
			#main{
				width: 521px;
				height: 622px;
				margin: auto;
			}
			.long{
				width: 517px;
				font-size: 50px;
			}
			#content{
				width: 513px;
				height: 100px;
				font-size: 30px;
			}
			button{
				width: 101px;
				height: 100px;
				font-size: 50px;
			}
		</style>

在这里插入图片描述
以下为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实现一个简单的计算器，可继续计算

猜你喜欢