【JS学习】慕课网6-11编程联系简单计算器

最新推荐文章于 2023-03-02 22:20:14 发布

weixin_34026484

最新推荐文章于 2023-03-02 22:20:14 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/lijie33402/p/4385211.html

版权

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

提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1；取值：var 啊= document.getElementById(“id”）.value；

注意标签值的获取一定别忘了 value

代码如下

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