zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    死磕 java同步系列之ReentrantLock源码解析(一)——公平锁、非公平锁
    死磕 java同步系列之AQS起篇
    死磕 java同步系列之自己动手写一个锁Lock
    死磕 java同步系列之synchronized解析
    死磕 java同步系列之volatile解析
    死磕 java同步系列之JMM(Java Memory Model)
    解决Linux下SSH超时自动断开
    Git常用命令
    JVM常用虚拟机命令汇总
    理解GC日志
  • 原文地址:https://www.cnblogs.com/wx1993/p/4686515.html
Copyright © 2011-2022 走看看