JS实现一个简单的计算器

时间:2022-04-15 10:14:28

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。效果如上:

第一步: 创建构建运算函数count()。

第二步: 获取两个输入框中的值和获取选择框的值。

提示:document.getElementById( id名 ).value 获取或设置 id名的值。

第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则。

提示:使用switch判断运算法则。

第四步:  通过 = 按钮来调用创建的函数,得到结果。

注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。

代码:

 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> 事件</title>
5 <script type="text/javascript">
6 function count(){
7 var a = document.getElementById("txt1").value;
8 var b = document.getElementById("txt2").value;
9 //获取第一个输入框的值
10 //获取第二个输入框的值
11 //获取选择框的值
12 var c = document.getElementById("select").value;
13 a = parseFloat(a);
14 b = parseFloat(b);
15 //获取通过下拉框来选择的值来改变加减乘除的运算法则
16 //设置结果输入框的值
17 switch(c){
18 case "+":
19 document.getElementById("fruit").value=parseInt(a)+parseInt(b);
20 break;
21 case "-":
22 document.getElementById("fruit").value=parseInt(a)-parseInt(b);
23 break;
24 case "*":
25 ocument.getElementById("fruit").value=parseInt(a)*parseInt(b);
26 break;
27 case "/":
28 document.getElementById("fruit").value=parseInt(a)/parseInt(b);
29 break;
30 }
31 }
32 </script>
33 </head>
34 <body>
35 <input type='text' id='txt1' />
36 <select id='select'>
37 <option value="+">+</option>
38 <option value="-">-</option>
39 <option value="*">*</option>
40 <option value="/">/</option>
41 </select>
42 <input type='text' id='txt2' />
43 <input type='button' value=' = ' onclick = "count()"/>
44 <input type='text' id='fruit' />
45 </body>
46 </html>