仿windows计算器

Posted on Edited on Views: Valine:
Symbols count in article: 268 Reading time ≈ 1 mins.

*功能：

  • 1、实现单击按钮录入数字

  • 2、实现基础四则运算功能，并添加必要的异常处理，例如，除数为零

  • 3、实现小数点功能并添加异常处理：小数点只能出现一次

  • 4、实现正负号功能

  • 5、实现退位功能，已经是最后一位时，显示框显示为零

  • 6、清屏功能

  • *使用的知识点:

  • 1、利用大量的自定义函数实现业务逻辑

  • 2、灵活运用事件及事件处理

  • 3、培养异常处理的编程方法

  • 4、培养并实践利用不同思路实现编程
    *综合练习的目的：

  • 1、将css、html和js有效的进行技术组合，实现业务功能

  • 2、锻炼和培养编程思想，解决问题的能力和方法

  • 3、锻炼和培养利用多种编程思路，完成预先设定的目标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>飞鸿做的计算器</title>
	<link rel="stylesheet" type="text/css" href="calc.css">
	<script type="text/javascript" src="calc.js"></script>
	<script type="text/javascript" src="link.js"></script>
	<h3>飞鸿做的计算器</h3>
</head>
<body onload="init(),linkf()">
	<div id="div1">
		<form>
			<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="" onclick="num_1_click()">
				<input type="button" value="2" name="" id="" onclick="num_2_click()">
				<input type="button" value="3" name="" id="" onclick="num_3_click()">
				<input type="button" value="*" name="" id="" >
				<input type="button" value="4" name="" id="" onclick="num_4_click()">
				<input type="button" value="5" name="" id="" onclick="num_5_click()">
				<input type="button" value="6" name="" id="" onclick="num_6_click()">
				<input type="button" value="-" name="" id="">
				<input type="button" value="7" name="" id="" onclick="num_7_click()">
				<input type="button" value="8" name="" id="" onclick="num_8_click()">
				<input type="button" value="9" name="" id="" onclick="num_9_click()">
				<input type="button" value="+" name="" id="">
				<input type="button" value="0" name="" id="" onclick="num_0_click()">
				<input type="button" value="." name="" id="">
				<input type="button" value="=" name="" id="">
				<input type="button" value="f" name="" id="linkf">
			</div>
		</form>
	</div>
	
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
*{
	margin: 0px;
	padding: 0px;
}
h3{
	color: blue;
	font-family: 楷书;
	top: 19%;
	left: 46%;
	position: absolute;
}
div{
	width: 170px;
}

#div1{
	top: 25%;
	left: 45%;
	position: absolute;
}

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

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

input[type="button"]:hover{
	background-color: yellow;
	border: 1px solid;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
function init(){
	var num=document.getElementById("num");
	num.value=0;
	num.disabled="disabled";


// function num_1_click(){
// 	var num=document.getElementById("num")
// 	var n=num.value;
// 	n=n+"1";
// 	document.getElementById("num").value=n*1;
// }
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{
			var btn_num=this.value;
			switch(btn_num){
				case "+":
					fh="+";
					btn_num1=Number(num.value);
					num.value=0;
					break;
				case "-":
					fh="-";
					btn_num1=Number(num.value);
					num.value=0;
					break;
				case "*":
					fh="*";
					btn_num1=Number(num.value);
					num.value=0;
					break;
				case "/":
					fh="/";
					btn_num1=Number(num.value);
					num.value=0;
					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);
							break;
						case "-":
							num.value=btn_num1-Number(num.value);
							break;
						case "*":
							num.value=btn_num1*Number(num.value);
							break;
						case "/":
						if(num.value=="0"){
							num.value=0;
							alert("除数不能为0！")
						}else{
							num.value=btn_num1/Number(num.value);
						}
							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;
	}
}
//isNaN:不能转换为数字：true  可以转换为数字：false
function isNumber(n){
	// if(!isNaN(n)){
	// 	return true;	//参数n是数字
	// }else{
	// 	return false;
	// }
	return !isNaN(n);
}
1
2
3
4
5
function linkf(){
	document.getElementById("linkf").onclick=function(){
		window.location.href="https://www.feihong.me";
	}
}
-------------本文结束感谢您的阅读-------------