实训第三天计算器实例
没有用div框架
用了table来做框
要求为输入的数字不能为空，必须是3到6位
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
| <html>
<head>
<title>
calculator
</title>
<meta charset="utf-8">
<script>
//检查输入格式
function check(){
ValueA = document.getElementById("ValueA").value;
ValueB = document.getElementById("ValueB").value;
//正则表达式，内容必须是0-9数字，3-6位
var reg = /^[0-9]{3,6}$/;
if(!reg.test(ValueA)||!reg.test(ValueB)){
//检查输入格式，test符合要求则返回真
document.getElementById("tishi").innerHTML ="数字不能为空且必须是3-6位";
return;//不要忘记return退出
}
else{
document.getElementById("tishi").innerHTML ="";
}
}
function SUM(){
ValueA = document.getElementById("ValueA").value;
ValueB = document.getElementById("ValueB").value;
Result = parseFloat(ValueA)+parseFloat(ValueB);
document.getElementById("Result").value = Result;
}
function SUB(){
ValueA = document.getElementById("ValueA").value;
ValueB = document.getElementById("ValueB").value;
Result = parseFloat(ValueA)-parseFloat(ValueB);
document.getElementById("Result").value = Result;
}
function MUL(){
ValueA = document.getElementById("ValueA").value;
ValueB = document.getElementById("ValueB").value;
Result = parseFloat(ValueA)*parseFloat(ValueB);
document.getElementById("Result").value = Result;
}
function DIV(){
ValueA = document.getElementById("ValueA").value;
ValueB = document.getElementById("ValueB").value;
Result = parseFloat(ValueA)/parseFloat(ValueB);
document.getElementById("Result").value = Result;
}
</script>
<style>
.butt{
padding-top:3px;
background-color:rgba(0,0,255,0.5);
border:none;
width:20px;
height:20px;
border-radius: 5px 5px;
margin:;
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<table border="1" style="background-color:pink;margin:0 auto;">
<tr>
<td width="350px" height="40px" colspan="3" align="center">计算器</td>
</tr>
<tr>
</tr>
<tr>
<td align="right">第一个数
</td>
<td><input id="ValueA">
</td>
<td width="50px" align="center" rowspan="3">
<div><input type="button" class="butt" value="+" onclick="check();SUM()"></div>
<div><input type="button" class="butt" value="-" onclick="check();SUB()"></div>
<div><input type="button" class="butt" value="*" onclick="check();MUL()"></div>
<div><input type="button" class="butt" value="/" onclick="check();DIV()"></div>
</td>
</tr>
<tr>
<td align="right">第二个数
</td>
<td><input id="ValueB">
</td>
</tr>
<tr>
<td align="right">计算结果
</td>
<td><input id="Result">
</td>
</tr>
</table>
<h2 style="color:red;" align="center" id="tishi"></h2>
</body>
</html>
|
