简易版网页计算器

最新推荐文章于 2024-07-02 17:35:34 发布

笑语轻柔

最新推荐文章于 2024-07-02 17:35:34 发布

阅读量1.5k

点赞数

分类专栏： JAVAWEB 文章标签：网页版简易计算器涉及HTMLCSSJS

本文链接：https://blog.csdn.net/u012716909/article/details/48377699

版权

JAVAWEB 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

需求：
通过用鼠标点击数字按钮和运算符按钮，实现现实中计算器的功能，能够做加减乘除及取余运算。并能够清零和取消上一次错误输入。

1、简单界面的实现：

首先建一个表单，在表单里插入一个表格。此界面的实现可以通过代码框中通过用表单<form></form>与表格<table></table>各标签功能实现，也可以在设计框中通过插入的方式实现。

2、鼠标点击数字键在窗口中相应数字显现的实现：

在每一个数字按键button定义一个带相对应参数的触发事件，然后在第一行第一列定义一个总的接收参数的函数，从而调用JS中定义的相应函数，将参数传给函数，进行相应的值的输出（为达到第二个触发键的数字不覆盖第一个触发键的数字，进行相应的数字加操作~数字在此是字符串性质的）。

3、鼠标点击字符键后再点相应的字符时，之前的数字被清除，显示当前的数字。

在符号键上定义一个总的触发事件，调用JS中的方法，接收相应的字符并进行标识，然后清空值。

4、点击等号时，显示相应的结果。

在等号按钮设一个触发事件，调用相应的函数。此时所要操作的两个数都已操作，然后根据符号的标识在调用等号的函数中进行相应的加减乘除取余运算并进行相应结果的输出。

5、C是清零键，点击文本显示框清空。

在C按钮上设置一个触发事件，点击此按钮调用JS中设置的函数，将文本框中的内容都变为空。

6、CE清除上一次错误的输入。如：第一次输入231，点击CE后，数值显示变为23

在CE按钮上设置一个触发事件，调用JS中设置的String中substring();方法在显示的数从第一个数开始到倒数第二个数结束，将此数显示。

负数的设置：

7、若想让按钮变的更丰富美观点，可以在CSS中进行相应字体颜色大小的设置或背景颜色的设置等。

整体代码实现：

untitle.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="t.js"></script>
<style>
#button19,#CE{ width:50px; 
	           height:30px; 
			   color:#6f3;
}
.c{
	width:50px;
	height:30px;
	color:#6f3;
}
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="429" height="229" border="1" align="center">
    <tr>
      <td colspan="3"><input type="text" name="firstNumber" min="10"  id="Accept(input)" width="255"/></td>
      <td width="85" align="center"><input type="button" class="c" name="C" value="C" οnclick="AcceptClear(clear);" /></td>
      <td width="70" align="center"><input type="button" name="CE" id="CE"  value="CE" οnclick="ce();" /></td>
    </tr>
    <tr>
      <td width="75" height="43" align="center"><input type="button" name="button"  value="7" οnclick="Accept(7);"/></td>
      <td width="90" align="center"><input type="button" name="button2"  value="8" οnclick="Accept(8);" /></td>
      <td width="75" align="center"><input type="button" name="button3"  value="9"  οnclick="Accept(9);"/></td>
      <td align="center"><input type="button" name="button4"  value="+/-" οnclick="fushu();" /></td>
      <td align="center"><input type="button" name="button5" value="%"  οnclick="AcceptChar('%');" /></td>
    </tr>
    <tr>
      <td align="center"><input type="button" name="button6" value="4" οnclick="Accept(4);" /></td>
      <td align="center"><input type="button" name="button7"  value="5" οnclick="Accept(5);" /></td>
      <td align="center"><input type="button" name="button8"  value="6"  οnclick="Accept(6);"/></td>
      <td align="center"><input type="button" name="button9"  value="+"  οnclick="AcceptChar('+');"  /></td>
      <td align="center"><input type="button" name="button10"  value="-" οnclick="AcceptChar('-');" /></td>
    </tr>
    <tr>
      <td align="center"><input type="button" name="button11"  value="1"  οnclick="Accept(1);"/></td>
      <td align="center"><input type="button" name="button12"  value="2"  οnclick="Accept(2);"/></td>
      <td align="center"><input type="button" name="button13"  value="3"  οnclick="Accept(3);"/></td>
      <td align="center"><input type="button" name="button14"  value="*" οnclick="AcceptChar('*');" /></td>
      <td align="center"><input type="button" name="button15" value="/" οnclick="AcceptChar('/');" /></td>
    </tr>
    <tr>
      <td align="center"><input type="button" name="button16"  value="0" οnclick="Accept(0);" /></td>
      <td align="center"><input type="button" name="button17"  value="." οnclick="Accept('.');" /></td>
      <td> </td>
      <td align="center"><input type="button" name="button18"  value="=" οnclick="Result();" /></td>
      <td align="center"><input type="button" id="button19"  value="返回" οnclick="AcceptClear(clear);" /></td>
    </tr>
  </table>
</form>
</body>
</html>

t.js代码：

// JavaScript Document

     var sum1 ="";
	 var opp = "";
	 var result= "";
	 var f = "";
	 var first = "";
	function Accept(input){
		          var sum = input;
				  sum1 = sum1 + sum;
	              Show();
	}

    function AcceptChar(opp){
		result = parseFloat(sum1);
		Char(opp);	
		sum1 ="";
	    			
		}
			
	function fushu(){
			sum1=-sum1;
			Show();
			result = parseFloat(-sum1);	
			Char(opp);	
		}	
	function Char(opp){
		 switch(opp){
			 case "+":
			       f = 1;break;
		      case "-":
			       f = 2;break;
			  case "*":
			        f = 3; break;
			   case "/":
			        f = 4; break;
			   case "%":
			        f = 4; break;
			 }
		}
		
		function Result(res){		
				if(f==1){
					result += parseFloat(sum1);
					 sum1 = result;
			        Show();
					}else if(f==2){
						result =  result - parseFloat(sum1);
					    sum1 = result;
			           Show();
						}else if(f== 3){
							result =  result * parseFloat(sum1);
							sum1 = result;
			                Show();
							}else if(f== 4){
							result =  result / parseFloat(sum1);
							sum1 = result;
			                Show();
							}else if(f== 5){
							result =  result % parseFloat(sum1);
							sum1 = result;
			                Show();
							}
			}
		
		
		function AcceptClear(cler){
			  sum1 ="";
			 Show();		
			}
			
			
	
		
		function ce(){
			if(sum1=="" ){
				return null;
			}else{
				var n=document.getElementById("Accept(input)").value;
				var m=n.substring(0,n.length-1);
				document.getElementById("Accept(input)").value=m;
				sum1=m;
			}
		}
		
	
   function Show(){
        document.getElementById("Accept(input)").value= sum1;	
	   
	   }