js+html實現簡易網頁計算器

本文轉載自查看原文 2019-10-04 23:33 9387 前端

前言

很早之前就想用js寫一個簡單的計算器，今天這個心願算是完成了，作為用js做的第一個小項目，掙扎了一下午，代碼其實挺簡單的，無奈本人太菜了，代碼十分鍾，bug半小時；

圖片展示

其實第一張圖才是我想做的計算器，但是最上面一行的功能無法實現，並且第一張是用grid布局寫的，添加js不方便，於是我又寫了第二張圖的界面

這個計算器的主要特點就是可以在屏幕上顯示出用戶想要計算的整個表達式，然后直接計算出結果，而不需要每進行一次加減乘除的運算都要按等於號；功能與界面是仿照的vivo手機自帶的計算器，由於我用的就是vivo手機；

代碼解析

html 部分

1、第一張圖片

<div  class="container">
       <input type="button" id="screen">
       <input type="button" id="mc" value="mc">
       
       <div id="m1"> m+</div>
       <div id="m-"> m-</div>
       <div id="mr"> mr</div>
       <div id="ac">AC </div>
       <div id="delete"><-</div>
       <div id="bracket"> +/-</div>
       <div id="chu"> ÷</div>
        <div id="num7">7</div>
        <div id="num8">8</div>
        <div id="num9">9</div>
        <div id="num4">4</div>
        <div id="num5">5</div>
        <div id="num6">6</div>
        <div id="num1">1</div>
        <div id="num2">2</div>
        <div id="num3">3</div>
        <div id="cheng">×</div>
        <div id="num0">0</div>
        <div id="spot">.</div>
        <div id="add">+</div>
        <div id="minus">-</div>
        <div id="equal">=</div>
  </div>

2、第二張圖片

<body>
 <table>
      <tr>
          <td colspan="4"><input class="screen" type="text" disabled /></td>
      </tr>
      <tr>
      	<td><input class="but_ac but" type="button" value="AC" style="color: orange"></td>
      	<td><input class="but_ac but" type="button" value="<—" style="color: orange"></td>
      	<td><input class="but" type="button" value="+/-"></td>
      	<td><input class="but" type="button" value="/"></td>
      </tr>
      <tr>
      	<td><input class="but" type="button" value="7"></td>
      	<td><input class="but" type="button" value="8"></td>
      	<td><input class="but" type="button" value="9"></td>
      	<td><input class="but" type="button" value="*"></td>  
      </tr>
      <tr>
      	<td><input class="but" type="button" value="4"></td>
      	<td><input class="but" type="button" value="5"></td>
      	<td><input class="but" type="button" value="6"></td>
      	<td><input class="but" type="button" value="-"></td>
      </tr>
      <tr>
      	<td><input class="but" type="button" value="1"></td>
      	<td><input class="but" type="button" value="2"></td>
      	<td><input class="but" type="button" value="3"></td>
      	<td><input class="but" type="button" value="+"></td>
      </tr>
      <tr>
      	<td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td>
      	<td><input class="but" type="button" value="."></td>
      	<td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td>
      </tr>
</table>
</body>

html部分就是簡單的用table寫的，在單元格內嵌套按鈕，為了和手機上的界面更像，AC、<-、=這三個按鈕單獨設置了字體顏色和背景顏色；eval函數在計算表達式的時候，只能識別乘號和除號只能識別*和/，而不是數學上的×和÷，因此，按鈕修改了一下，下面的代碼在網頁打開之后，和上面的圖片兩個按鈕有所不同；

css部分

第一張圖片的

.container{
	margin:0 auto;
	display: grid;
	width: 350px;
    height: 550px;
	grid-template-columns:repeat(4,25%);
	grid-template-rows:repeat(8,12.5%);
	background-color:lightgray;
	margin-top: 50px;
	text-align: center;
	line-height: 68.75px;
    font-size: 1.5em;
 
}
#screen{
	grid-column: 1/5;
	grid-row: 1/3;
	background-color: black;
}
#mc{
	grid-column: 1/2;
	grid-row: 3/4;
	border:solid 1px  gray;
	border-left: 0px;
	font-size: 1.1em;
	background-color:lightgray;
}
#m1{
	grid-column: 2/3;
	grid-row: 3/4;
	border:solid 1px  gray;
	border-left: 0px;
}
#m-{
	grid-column:3/4;
	grid-row: 3/4;
	border:solid 1px  gray;
	border-left: 0px;
}
#mr{
    grid-column: 4/5;
	grid-row: 3/4;
	border:solid 1px  gray;
	border-right: 0px;
    border-left: 0px;

}
#ac{
	grid-column:1/2;
	grid-row: 4/5;
	border:solid 1px  gray;
	border-left: 0px;
	color: orange;
	border-top: 0px;
}

#delete{
	grid-column:2/3;
	grid-row: 4/5;
	border:solid 1px  gray;
	border-left: 0px;
	color: orange;
	border-top: 0px;
}
#bracket{
	grid-column:3/4;
	grid-row: 4/5;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#chu{
	grid-column:4/5;
		grid-row: 4/5;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
		border-right: 0px;
	
}
#num7{
	grid-column:1/2;
	grid-row: 5/6;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#num8{
    grid-column:2/3;
	grid-row: 5/6;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#num9{
	grid-column:3/4;
	grid-row: 5/6;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#cheng{
	grid-column:4/5;
	grid-row: 5/6;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
		border-right: 0px;
}
#num4{
	grid-column:1/2;
	grid-row: 6/7;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#num5{
	grid-column:2/3;
	grid-row: 6/7;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#num6{
	grid-column:3/4;
	grid-row: 6/7;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#minus{
	grid-column:4/5;
	grid-row: 6/7;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
		border-right: 0px;
}
#num1{
	grid-column:1/2;
	grid-row: 7/8;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#num2{
	grid-column:2/3;
	grid-row: 7/8;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#num3{
	grid-column:3/4;
	grid-row: 7/8;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}

#add{
	grid-column:4/5;
	grid-row: 7/8;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
		border-right: 0px;
}
#num0{
	grid-column:1/3;
	grid-row: 8/9;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;

}
#spot{	grid-column:3/4;
	grid-row: 8/9;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
}
#equal{
	grid-column:4/5;
	grid-row: 8/9;
	border:solid 1px  gray;
	border-left: 0px;
	border-top: 0px;
	border-right: 0px;
	color: white;
	background-color: orange;
}

第二張圖片的

   <style type="text/css">
    	table{      
    		margin:0 auto;      //使整個計算器的界面位於網頁中央 
    	}
    	.but_ac{
    		width: 80px;
    		height: 60px;
    		background-color : lightgray;  //設置按鈕的背景顏色為淺灰色
    		font-size: 1.2em;              //設置字體大小
    	}
    	.but{
    		width: 80px;
    		height: 60px;
    		background-color : lightgray;
    		font-size: 1.2em;
    	}
    	.screen{
    		    width: 350px;
            height: 70px;
            font-size: 1.5em;
            color: white;
            background-color: black;
            text-align:right;       //使用戶輸入的表達數從屏幕的右邊開始顯示
    	}
    </style>

js部分

思路

獲取用戶所點擊的按鈕上的元素
將獲取的元素顯示在屏幕上
調用eval函數計算表達式的結果
整體就是用一連串的if else語句判斷你所點擊的按鈕，然后作出回應

代碼

<script type="text/javascript">
window.onload=function(){         
var num=document.getElementsByClassName("but");  //num數組存放元素對象
var scr=document.getElementsByClassName("screen")[0]; //獲取屏幕對象
for(var i=0;i<num.length;i++)    //通過for循環為每個按鈕添加onclick事件
{
  num[i].onclick=function(){   
   if(this.value=="AC"){       //如果點擊AC，則清空屏幕
    	   scr.value="";
    }
  else if( this.value=="+/-"){  //如果點擊“+/-”按鈕有兩種情況
       //第一種情況，如果此時屏幕為空，則什么也不顯示
       if(scr.value==""){      
    	      scr.value="";
         }
       //如果屏幕不為空，就判斷最后兩個元素是不是運算符加數字的結構
        else if(isNaN(scr.value.charAt(scr.value.length-  1))==false&&isNaN(scr.value.charAt(scr.value.length-2))==true)
         {
       //給最后一個數字加括號並變為負數 
    scr.value=scr.value.substr(0,scr.value.length-1)+"("+"-"+scr.value.charAt(scr.value.length-1)+")";
    	   }  
   }  
    //當屏幕不為空時，判斷點擊的是不是退格鍵
  else if (this.value=="<—"&&this.value!=""){     
     //將最后一個元素截掉
        scr.value=scr.value.substr(0,scr.value.length-1);
  }
    //當屏幕為空時判斷是否點擊的是小數點
 	else if(scr.value==""&&this.value=="."){
        scr.value="0.";
   }
    //當點擊等於號時，用eval函數計算表達式的結果並顯示到屏幕上
  else if(this.value=="="){
           scr.value=eval(scr.value); 
   }
    //當屏幕為空時，點擊+、-、*、/時不做反應
  else if(scr.value==""&&(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"))
   {
      scr.value=="";
   }
  else{
        	scr.value+=this.value;
   }
      }
    }
 } 
    </script>

完整代碼

<!DOCTYPE html>
<html>
<head>
	<title>jsss</title>
    <style type="text/css">
    	table{
    		
    		margin:0 auto;
            
    	}
    	
    	.but_ac{
    		width: 80px;
    		height: 60px;
    		background-color : lightgray;
    		font-size: 1.2em;
    	}
    	.but{
    		width: 80px;
    		height: 60px;
    		background-color : lightgray;
    		font-size: 1.2em;
    	}
    	.screen{
    		width: 350px;
            height: 70px;
            font-size: 1.5em;
            color: white;
            background-color: black;
            text-align:right; 
    	}

    </style>

    <script type="text/javascript">
    	window.onload=function(){
    	   var result;
           var str=[];
    	   var num=document.getElementsByClassName("but");
    	   var scr=document.getElementsByClassName("screen")[0];
           for(var i=0;i<num.length;i++)
           {

            	num[i].onclick=function(){

                if(this.value=="AC"){
    	   	    	scr.value="";
    	     	  }
    	     	else if( this.value=="+/-"){
    	     		if(scr.value=="")
    	     		{
    	     			scr.value="";
    	     		}
    	     		else if(isNaN(scr.value.charAt(scr.value.length-1))==false&&isNaN(scr.value.charAt(scr.value.length-2))==true)
    	     		{
    	     			scr.value=scr.value.substr(0,scr.value.length-1)+"("+"-"+scr.value.charAt(scr.value.length-1)+")";
    	     		}  
     	     	  }
    	        
    	   	    else if (this.value=="<—"&&this.value!=""){      
                  scr.value=scr.value.substr(0,scr.value.length-1);
    	   	    }
        		else if(scr.value==""&&this.value=="."){
        		 	 scr.value="0.";
        		 }
        		else if(this.value=="="){
                    scr.value=eval(scr.value); 
                 }
                 else if(scr.value==""&&(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/"))
                 	{
                 		scr.value=="";
                 	}
               
               else
                 {
                 	scr.value+=this.value;
                 }
        	}
         }

    }
    
    </script>

</head>
<body>
 <table>
      <tr>
          <td colspan="4"><input class="screen" type="text" disabled /></td>
      </tr>
      <tr>
      	<td><input class="but_ac but" type="button" value="AC" style="color: orange"></td>
      	<td><input class="but_ac but" type="button" value="<—" style="color: orange"></td>
      	<td><input class="but" type="button" value="+/-"></td>
      	<td><input class="but" type="button" value="/"></td>
      </tr>
      <tr>
      	<td><input class="but" type="button" value="7"></td>
      	<td><input class="but" type="button" value="8"></td>
      	<td><input class="but" type="button" value="9"></td>
      	<td><input class="but" type="button" value="*"></td>
      </tr>
      <tr>
      	<td><input class="but" type="button" value="4"></td>
      	<td><input class="but" type="button" value="5"></td>
      	<td><input class="but" type="button" value="6"></td>
      	<td><input class="but" type="button" value="-"></td>
      </tr>
      <tr>
      	<td><input class="but" type="button" value="1"></td>
      	<td><input class="but" type="button" value="2"></td>
      	<td><input class="but" type="button" value="3"></td>
      	<td><input class="but" type="button" value="+"></td>
      </tr>
      <tr>
      	<td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td>
      	<td><input class="but" type="button" value="."></td>
      	<td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td>
      </tr>
     

</table>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用html+css+js實現簡易計算器使用html+css+js實現簡易計算器 html、css、js實現簡易計算器原生JS實現簡易計算器 JS實現簡易的計算器 JS實現簡易計算器的7種方法 JS實現簡易計算器的7種方法 php+html實現網頁計算器用js制作簡易計算器用js寫一個簡易計算器