• 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>
    复制代码
  • 相关阅读:
    WinFrom 经典登录窗体(转)
    .Net 反射牛刀小试
    WCF和Entity framework 发现的性能问题(转)
    扩展方法(C# 编程指南)
    如何把Access中数据导入Mysql中 (转)
    MD5 Message Digest
    .Net 集合排序
    test
    如何使自己的程序只运行一次(转)
    WCF传较大数据(转)
  • 原文地址:https://www.cnblogs.com/zhangyuhang3/p/6873401.html
Copyright © 2020-2023  润新知