2.2案例实现：仿win计算器

Others 2021-11-28 04:38:35 views: null

************************************************************
*名称：仿windows计算器
*功能：
*    1、实现单击按钮录入数字
*    2、实现基础四则运算功能，并添加必要的异常处理，例如，除数为零
*    3、实现小数点功能并添加异常处理：小数点只能出现一次
*    4、实现正负号功能
*    5、实现退位功能，已经是最后一位时，显示框显示为零
*    6、清屏功能
*使用的知识点:
*    1、利用大量的自定义函数实现业务逻辑
*    2、灵活运用事件及事件处理
*    3、培养异常处理的编程方法
*    4、培养并实践利用不同思路实现编程
*综合练习的目的：
*    1、将css、html和js有效的进行技术组合，实现业务功能
*    2、锻炼和培养编程思想，解决问题的能力和方法
*    3、锻炼和培养利用多种编程思路，完成预先设定的目标
************************************************************

一、计算器面板的实现

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript"src="index.js"></script>

</head>
<body >
	<div id="div1">
		<div id="div2">
			<input type="text" name="num" id="num"/>
		</div id="div3">
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
		<div>
			
		</div>
	</div>
</body>
</html>
*{
	margin: 0px;
	padding: 0px
}

div{
	width: 170px;
}

#div1{
	top: 60px;
	left: 100px;
	position: absolute;
}

input[type="button"]{
	width: 30px;
	margin-right: 5px;
}

input[type="text"]{
	width: 149px;
	border: 1px solid;
	padding-right: 5px;
	box-sizing: border-box;
}

出现的效果如图：

二、实现计算器输入框

1.首先实现计算器页面的数字按键，直接在html中实现

</div id="div3">
			<input type="button" value="c" name="" id=""/>
			<input type="button" value="←" name="" id=""/>
			<input type="button" value="+/-" name="" id=""/>
			<input type="button" value="/" name="" id=""/>
			<input type="button" value="1" name="" id=""/>
			<input type="button" value="2" name="" id=""/>
			<input type="button" value="3" name="" id=""/>
			<input type="button" value="*" name="" id=""/>
			<input type="button" value="4" name="" id=""/>
			<input type="button" value="5" name="" id=""/>
			<input type="button" value="6" name="" id=""/>
			<input type="button" value="-" name="" id=""/>
			<input type="button" value="7" name="" id=""/>
			<input type="button" value="8" name="" id=""/>
			<input type="button" value="9" name="" id=""/>
			<input type="button" value="+" name="" id=""/>
			<input type="button" value="0" name="" id=""/>
			<input type="button" value="." name="" id=""/>
			<input type="button" value="=" name="" id=""/>
			<input type="button" value="m" name="" id=""/>
		<div>

其次实现在文本框内默认显示0，并且右对齐

                           默认数字0在html中实现，并且实现在文本框内不让用户键盘输入，只能点击

<input type="text" value="0" disabled="disabled" name="num" id="num"/>

                                 另一种默认初始化方式在js里面实现，（更推荐）把所有初始化建议写在一个函数里。

function init(argument) {
	// body...
	var num=document.getElementById('num');
	num.value=0;
	num.disabled="disabled";
	
}

右对齐在cs文件里实现

input[type="text"]{
	width: 149px;
	text-align: right;
	background-color: #fff
	border: 1px solid;
	padding-right: 5px;
	box-sizing: border-box;
}

2.实现计算器单击数字就在文本框里显示的功能

这个最简单的方法就是在每一个数字的html里添加一个单击事件，然后在js里定义该单击事件的功能

function num_1_click(argument) {
	// body...
	var num=document.getElementById('num');
	var n=num.value;
	n=n+"1";
	document.getElementById("num").value=n*1;
}

这样显得代码冗余，有几个按键则需要添加几个function，所以之后进行优化

var oButton=document.getElementsByTagName("input");
for(var i=0;i<oButton.length;i++){
		oButton[i].onclick=function(){
			if(isNumber(this.value)){
				num.value=(num.value+this.value)*1;}
                        else{
				alert("fei");}

在js的初始化里完成数字的单击显示。

3.接下来实现非数字的单击功能

这是非数字的每个功能框架。

                                   var btn_num=this.value;
				
				    switch(btn_num){
					case "+":
						
					    break;
					case "-":
						
					    break;
					case "*":
						
					    break;
					case "/":
						
					    break;
					case ".":
						
					    break;
					case "←":
						
					    break;
					case "c":
						
					    break;
					case "+/-":
						
					    break;
					case "=":
					   
					
					   }

接下来实现每个功能。

3.1四则运算的实现

var btn_num1;
var fh;
else{
	//alert("fei");
	var btn_num=this.value;
				
	switch(btn_num){
	    case "+":
		btn_num1=Number(num.value);
		num.value=0;
		fh="+";
		break;
	    case "-":
		btn_num1=Number(num.value);
		num.value=0;
		fh="-";
		break;
	     case "*":
		btn_num1=Number(num.value);
		num.value=0;
		fh="*";
		break;
	     case "/":
		btn_num1=Number(num.value);
		num.value=0;
		fh="/";
		break;
            case "=":
		switch(fh){
		    case "+":
                       num.value=btn_num1+Number(num.value);
	               //console.log(btn_num1);
		       break;
		    case "-":
			 num.value=btn_num1-Number(num.value);
			//console.log(btn_num1);
			break;
	            case "*":
                         num.value=btn_num1*Number(num.value);
	                       //console.log(btn_num1);
			 break;
		    case "/":
			 if(Number(num.value)==0){
				alert("除数不能是0");
			        num.value=0;
			 }else{
                             num.value=btn_num1/Number(num.value);
					           }    	   
		                   //console.log(btn_num1);
			   break;
			 }
		 break;

3.2小数点的实现

                                       case ".":
					    num.value=dec_number(num.value);
					    break;


/*小数点*/
function dec_number(n){
   if(n.indexOf(".")==-1){
      n=n+".";
   }
   return n;
}

3.3退位键的实现

case "←":
     num.value=back(num.value);

/*退位键*/
function back(n){
   n=n.substr(0,n.length-1);
   if(isNull(n)){
   	  n="0";
   }
   return n;
}
/*验证文本框是否为空或者0*/
function isNull(n){
   if(n=="0" || n.length==0){
       return true;
   }else{
   	   return false;
   }
}

3.4清屏功能的实现

case "c":
     num.value="0";

3.5正负号功能的实现

case "+/-":
	num.value=sign(num.value);
	break;
/*正负号*/
function sign(n){
   // if(n.indexOf("-")==-1){
   // 	  n="-"+n;
   // }else{
   // 	  n=n.substr(1,n.length);
   // }
   n=Number(n)*-1;
   return n;
}

3.6完善计算器细节

3.6.1当指针指在某个按键上，背景色可以改变。（利用伪类）

input[type="button"]:hover{
	background-color: yellow;
	border: 1px solid;
}

3.6.2当单击m时，可以打开一个网页。（超级链接）

function init_mooc(){
	document.getElementById("imooc").onclick=function(){
		window.location.href="http://www.imooc.com";
	}
}

3.6.3设置文本框里面的0与边框的间距

input[type="text"]{
	width: 152px;
	text-align: right;
	background-color: #fff;
	border: 1px solid;
	padding-right: 5px;
	box-sizing: border-box;
}

至此，仿win计算器所有功能已经实现，完整代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <link rel="stylesheet" type="text/css" href="calc.css">
  <script type="text/javascript" src="calc.js"></script>
  <script type="text/javascript" src="js/mooc.js"></script>
</head>
<body onload="init(),init_mooc()">
 	<div id="div1">    
 		<div id="div2">
 			<input type="text" name="num" id="num" />
 		</div>
 	    <div id="div3">
 			<input type="button" value="c" name="" id=""/>
 			<input type="button" value="←" name="" id=""/>
 			<input type="button" value="+/-" name="" id=""/>
 			<input type="button" value="/" name="" id=""/>
 			<input type="button" value="1" name="" id="n1"/>
 			<input type="button" value="2" name="" id=""/>
 			<input type="button" value="3" name="" id=""/>
 			<input type="button" value="*" name="" id=""/>	
 			<input type="button" value="4" name="" id=""/>
 			<input type="button" value="5" name="" id=""/>
 			<input type="button" value="6" name="" id=""/>
 			<input type="button" value="-" name="" id=""/>
 			<input type="button" value="7" name="" id=""/>
 			<input type="button" value="8" name="" id=""/>
 			<input type="button" value="9" name="" id=""/>
 			<input type="button" value="+" name="" id=""/>
 			<input type="button" value="0" name="" id=""/>
 			<input type="button" value="." name="" id=""/>
 			<input type="button" value="=" name="" id=""/>
 			<input type="button" value="m" name="" id="imooc"/>
 	    </div>
 	</div>
</body>
</html>
*{
	margin:0px;
	padding:0px;
}
div{
	width: 170px;
}
#div1{
	top:60px;
	left: 100px;
	position: absolute;
}
input[type="button"]{
	width: 30px;
	margin-right: 5px;

}
input[type="text"]{
	width: 152px;
	text-align: right;
	background-color: #fff;
	border: 1px solid;
	padding-right: 5px;
	box-sizing: border-box;
}

input[type="button"]:hover{
	background-color: yellow;
	border: 1px solid;
}
function init(){
	var num=document.getElementById("num");
	num.value=0;
	num.disabled="disabled";
	// var n1=document.getElementById("n1");
	// n1.onclick=function(){
	// 	alert("123");
	// }
	var oButton=document.getElementsByTagName("input");
	var btn_num1;
	var fh;
	for(var i=0;i<oButton.length;i++){
		oButton[i].onclick=function(){
			if(isNumber(this.value)){
				//num.value=(num.value+this.value)*1;
				if(isNull(num.value)){
					num.value=this.value;
				}else{
					num.value=num.value+this.value;
				}
			}else{
				//alert("fei");
				var btn_num=this.value;
				
				switch(btn_num){
					case "+":
						btn_num1=Number(num.value);
						num.value=0;
						fh="+";
					    break;
					case "-":
						btn_num1=Number(num.value);
						num.value=0;
						fh="-";
					    break;
					case "*":
						btn_num1=Number(num.value);
						num.value=0;
						fh="*";
					    break;
					case "/":
						btn_num1=Number(num.value);
						num.value=0;
						fh="/";
					    break;
					case ".":
						num.value=dec_number(num.value);
					    break;
					case "←":
						num.value=back(num.value);
					    break;
					case "c":
						num.value="0";
					    break;
					case "+/-":
						num.value=sign(num.value);
					    break;
					case "=":
					    switch(fh){
					    	case "+":
					    	  num.value=btn_num1+Number(num.value);
					          //console.log(btn_num1);
					          break;
					        case "-":
					    	   num.value=btn_num1-Number(num.value);
					          //console.log(btn_num1);
					           break;
					        case "*":
					    	   num.value=btn_num1*Number(num.value);
					          //console.log(btn_num1);
					           break;
					        case "/":
					           if(Number(num.value)==0){
					           	    alert("除数不能是0");
					             	num.value=0;
					           }else{
					           	  num.value=btn_num1/Number(num.value);
					           }
					    	   
					          //console.log(btn_num1);
					           break;
					    }
					    break;
				}
			}
		}
	}
}
/*正负号*/
function sign(n){
   // if(n.indexOf("-")==-1){
   // 	  n="-"+n;
   // }else{
   // 	  n=n.substr(1,n.length);
   // }
   n=Number(n)*-1;
   return n;
}
/*退位键*/
function back(n){
   n=n.substr(0,n.length-1);
   if(isNull(n)){
   	  n="0";
   }
   return n;
}
/*小数点*/
function dec_number(n){
   if(n.indexOf(".")==-1){
      n=n+".";
   }
   return n;
}
/*验证文本框是否为空或者0*/
function isNull(n){
   if(n=="0" || n.length==0){
       return true;
   }else{
   	   return false;
   }
}

function isNumber(n){
   // if(!isNaN(n)){
   //   	return true;//参数n是数字
   // }else{
   // 	   return false;//参数n不是数字
   // }
  return  !isNaN(n);
}
// isNaN：不能转换为数字：true，可以转换成数字是false





function init_mooc(){
	document.getElementById("imooc").onclick=function(){
		window.location.href="http://www.imooc.com";
	}
}

 

Guess you like

Origin blog.csdn.net/weixin_45823221/article/details/111052997
Recommended
Arc Browser for Windows 1.0 officially GA
A programmer born in the 1990s developed a video porting software and made over 7 million in less than a year. The ending was very punishing!
Ranking
1. Select Sort
Create a thread thread
3 press to play ball that reach 6
Programmation CUDA (4) : gestion de la mémoire
SpringBoot database connection pool Druid error
E Diudiu App redesign summary
4EVERLAND Hosting now supports SNS+IPFS
About HTTPS
[vue3+vite+ts+element-plu+sass] uses bug records in sass
Interpretation of HUAWEI CLOUD GaussDB (for Influx): Best Practice Data Modeling
Daily
More
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)

Code World

© 2018 codetd.com