HTML制作一个简易计算器小应用

先展示UI界面

先进行逻辑分析

1.界面

外层宽250px，长600px用来显示计算器主界面
分上下结构上：用来显示数字 1.显示结果
                              2.显示输入数字

            下：用来显示按钮 ul li button
            依次为 AC +/- % /
                    7   8    9 *
                    4   5    6 -
                    1   2    3 +
                    0        . =

2.按钮点击事件（输入层变量resval，显示层变量sumval，运算符变量operator）
   AC清除    将resval与显示为0，将显示层变量为0，显示为空
   数字1-9： 1.判断输入框为0                             resval为0，输入层显示为空
             2.判断前一次输入为等于（运算符状态为0）     运算符状态改为1 ，resval为0，输入层显示为空
             3.resval等于resval与输入数字字符串相加
             4.在输入层显示resval

   符号.    1.先判断前面是否有小数点     有    无操作结束
            2.判断前一次输入为等于（运算符状态为0）     运算符状态改为1 ，resval为0，输入层显示为0
            3.录入小数点，将小数点作为字符串与resval进行字符串相加并显示在输入层

   运算符（+-*/%） 1.判断前一次运算符           1.0    继续操作
                                                                        2.非0 相当于先进行上一次运算符运算再进行运算符操作

                   2.将resval赋值给sumval
                   3.将sumval显示到结果层并加上运算符
                   4.输入层显示为空，resval为0
                   5.将此次运算符操作储存到变量operator中 +：1；-：2；*：3；/：4；%：5；缺省与=：0；

   等号            判断前一次运算符         1. 在显示层显示 sumval与resval运算
                                                          2. 将运算结果赋值给resval
                                                          3. 将resval在输入层显示

4. 将operator改为0

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算器</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
	<style type="text/css">
	    *{margin:0;padding:0;}
	    ul,li{list-style: none;}
		.reveal{width:100%;height:100px;}
		.reveal>input{height:50px;line-height: 50px;font-size:50px;color:#ffffff;background-color: black;text-align: right;border: none;width: 240px;padding-right: 10px;}
		.button>ul>li>button{height:50px;width:45px;border:none;border-radius: 25px;margin:5px ;color:#ffffff;background-color:#585252;font-size:20px;}
		.button>ul li:first-child>button{background:#D6D0CE;color:black;}
		.button>ul li button:last-child{background:#F09C10;color:#ffffff;}
	</style>
	<script type="text/javascript">
		$(function(){
			//获取输入框元素
            var res=$('.result');
            //获取结果显示框
            var sum=$('.sum');
            var resval=0;
            var sumval=0;
            var operator=-1;
            var jon=['+','_','*',''];
            //求10的幂函数
            function funm(n){
            	if(n==0){
            		return 1
            	}
            	return funm(n-1)*10           		
            }     
           
            //AC清除按钮
            $('.dump').on('click',function(){
               res.val('0');
               resval=0;
               sum.val('');
               sumber=0;
               operator=-1;
            });
            //C清楚按钮
            $('.clear').on('click',function(){
            	if(resval!='0'){
            		resval=resval.slice(0,resval.length-1);
            		res.val(resval);
            	}
            })
            //数字按钮
            $(".number").on('click',function(){   
            //如果当前输入框数字为0或前一次输入为等号时 
               if(operator==0){
               	 operator=-1;
               	 res.val('0');
               	 resval=''; 
               } 
               if(resval=="0"){
               	 res.val('0');
               	 resval=''; 
               }
                
               resval=resval+$(this).html();
               res.val(resval);
            });
                     
             //小数点
            $('.spot').on('click',function(){
            	//遍历输入框数字，检查是否有小数点
                 for(var i=0;i<resval.length;i++){
                 	if(resval[i]=="."){
                 		return false;
                 	}
                 }   
                  if(operator==0){
               	 operator=1;
                 res.val('0')
               	 resval=res.val(); 
               }   	 
            	 	 resval=resval+$(this).html();
	                 res.val(resval);        
            });
             //运算符
             $('.oper').on('click',function(){
             	if(operator != 0){
             	switch(operator){
                	case 0:
                	     resval=Number(sumval)+Number(resval);             	     
                	     break;
                	case 1:
                	     resval=Number(sumval)+Number(resval);             	     
                	     break;
                	case 2:
                	     resval=Number(sumval)-Number(resval);
                	     break;
                	case 3:
                	     resval=Number(sumval)*Number(resval);
                	     break;
                	case 4:
                	     resval=Number(sumval)/Number(resval);
                	     break;
                	case 5:
                	     resval=Number(sumval)%Number(resval);
                	     break;
                } 
             	}
             	operator=Number($(this).attr('operator'));
            	sumval=resval;
            	sum.val(resval+jon[operator-1]);
            	resval=0;
            	res.val('');
             })
             //等于
             $('.equal').on('click',function(){
             	
                switch(operator){
                	case 0:
                	     sum.val(sumval+'+'+resval);
                	     resval=Number(sumval)+Number(resval);             	     
                	     res.val(resval);
                	     operator=0;
                	     break;
                	case 1:
                	     sum.val(sumval+'+'+resval);
                	     resval=Number(sumval)+Number(resval);             	     
                	     res.val(resval);
                	     operator=0;
                	     break;
                	case 2:
                	     sum.val(sumval+'-'+resval);
                	     resval=Number(sumval)-Number(resval);
                	     res.val(resval); 
                	     operator=0;
                	     break;
                	case 3:
                	     sum.val(sumval+'*'+resval);
                	     resval=Number(sumval)*Number(resval);
                	     res.val(resval);       
                	     operator=0;
                	     break;
                	case 4:
                	     sum.val(sumval+'/'+resval);
                	     resval=Number(sumval)/Number(resval);
                	     res.val(resval);
                	     operator=0;
                	     break;
                	case 5:
                	     sum.val(sumval+'%'+resval);
                	     resval=Number(sumval)%Number(resval);
                	     res.val(resval);
                	     operator=0;
                	     break;
                }
             });



		});
	</script>
</head>
<body>
	<div style="width:250px;height:400px;background-color:black;margin:300px auto 0">
		<div class="reveal">
			<input type="button" name="" class="sum" style="width:250px">
			<input type="text" name="" value="0" class="result">
		</div>
		<div class="button">
			<ul>
				<li>
					<button class="dump">AC</button>
					<button class="clear">C</button>
					<button class="oper" operator="5">%</button>
					<button class="oper" operator="4">/</button>
				</li>
				<li>
					<button class="number">7</button>
					<button class="number">8</button>
					<button class="number">9</button>
					<button class="oper" operator="3">*</button>
				</li>
				<li>
					<button class="number">4</button>
					<button class="number">5</button>
					<button class="number">6</button>
					<button class="oper" operator="2">-</button>
				</li>
				<li>
					<button class="number">1</button>
					<button class="number">2</button>
					<button class="number">3</button>
					<button class="oper" operator="1">+</button>
				</li>
				<li>
					<button class="number" style="width:105px;">0</button>
					<button class="spot">.</button>
					<button class="equal" operator="0">=</button>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/djz917/article/details/80667248
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-08 16:19:36
阅读 ( 1212 )
分类：前端

HTML制作一个简易计算器小应用

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看