学习JS：三个输入框编写简单计算

利用js实现三个输入框，数字、运算符、数字，实现简单的计算。

1、前台JS主要实现方法。

 1 <script type="text/javascript">
 2         /* 定义一个Calculator类*/
 3         function Calculator() {
 4             this.jiSuan = function (num1, num2, oper) {
 5                 var res = 0;
 6                 switch (oper) {
 7                     case "+":
 8                         res = num1 + num2;
 9                         break;
10                     case "-":
11                         res = num1 - num2;
12                         break;
13                     case "*":
14                         res = num1 * num2;
15                         break;
16                     case "/":
17                         res = num1 / num2;
18                         break;
19                 }
20                 return res;
21             }
22             //是否为空
23             this.isEmpty = function (str) {
24                 var flag = false;
25                 if (str == null || str == "") {
26                     flag = true;
27                 }
28                 return flag;
29             }
30             //是否是数字
31             this.isNum = function (str) {
32                 var flag = true;
33                 if (isNaN(str)) {
34                     flag = false;
35                 }
36                 return flag;
37             }
38             //是否为四个运算符中一种
39             this.isOper = function (str) {
40                 var flag = true;
41                 if (str != "+" && str != "-" && str != "*" && str != "/") {
42                     flag = false;
43                 }
44                 return flag;
45             }
46         }
47         /*计算结果*/
48         function inputEquel(e) {
49             var calculator = new Calculator();
50             var result = document.getElementById("result");
51             var inp1 = document.getElementById("inp1").value;
52             var inp2 = document.getElementById("inp2").value;
53             var oper = document.getElementById("oper").value;
54             if (e.value == "=") {
55                 //输入数字不能为空，且必须为数字
56                 if (calculator.isEmpty(inp1)) {
57                     alert("请输入第一个数字");
58                     return;
59                 }
60                 else if (!calculator.isNum(inp1)) {
61                     alert("请输入正确的数字");
62                     return;
63                 }
64                 if (calculator.isEmpty(inp2)) {
65                     alert("请输入第二个数字");
66                     return;
67                 }
68                 else if (!calculator.isNum(inp2)) {
69                     alert("请输入正确的数字");
70                     return;
71                 }
72                 //输入的运算符为：+、-、*、/其中一个
73                 if (!calculator.isOper(oper)) {
74                     alert("请输入运算符(+、-、*、/)");
75                     return;
76                 }
77                 //判断当计算符号是/时，除数不能为0
78                 if (oper == "/" && parseFloat(inp2) == 0) {
79                     alert("当运算符为 / ,除数不能为0");
80                     return;
81                 }
82                 //调用对象方法
83                 result.innerText = calculator.jiSuan(parseFloat(inp1), parseFloat(inp2), oper);
84             }
85         }
86     </script>

View Code

2、html代码

 1 <table>
 2             <tr>
 3                 <td class="width_8">
 4                 </td>
 5                 <td>
 6                     <label id="lblInput1">
 7                         第一个计算数字
 8                     </label>
 9                 </td>
10                 <td class="width_8">
11                 </td>
12                 <td>
13                     <label id="lblOper">
14                         运算符（+、-、*、/）
15                     </label>
16                 </td>
17                 <td class="width_8">
18                 </td>
19                 <td>
20                     <label id="lblInput2">
21                         第二个计算数字
22                     </label>
23                 </td>
24                 <td class="width_8">
25                 </td>
26                 <td>
27                 </td>
28                 <td class="width_8">
29                 </td>
30                 <td>
31                     <label id="lblResult">
32                         结果
33                     </label>
34                 </td>
35             </tr>
36             <tr>
37                 <td class="width_8">
38                 </td>
39                 <td>
40                     <input id="inp1" type="text" value="" />
41                 </td>
42                 <td class="width_8">
43                 </td>
44                 <td>
45                     <input id="oper" type="text" value="" />
46                 </td>
47                 <td class="width_8">
48                 </td>
49                 <td>
50                     <input id="inp2" type="text" value="" />
51                 </td>
52                 <td class="width_8">
53                 </td>
54                 <td>
55                     <input id="btnCalculator" type="button" value="=" onclick="inputEquel(this)" />
56                 </td>
57                 <td class="width_8">
58                 </td>
59                 <td>
60                     <label id="result">
61                     </label>
62                 </td>
63             </tr>
64         </table>

View Code

3、相关CSS

.width_8
        {
            width: 8px;
        }

View Code

4、运行结果

posted @ 2014-05-25 20:48 Do_2014 阅读(751) 评论(0) 收藏举报

刷新页面返回顶部