当前位置 博文首页 > html输入两个数实现加减乘除功能

    html输入两个数实现加减乘除功能

    作者:Jian Yue 时间:2021-07-02 18:02

    一、parseFloat() 函数
     

    在网页中制作一个简单的计算器,在文本框输入两个数,能够实现两个数的加减乘除。
    parseFloat() 函数可解析一个字符串,并返回一个浮点数。
    该函数指定字符串中的首个字符是否是数字。如果是,则对字符
    串进行解析,直到到达数字的末端为止,然后以数字返回该数字,
    而不是作为字符串。
    语法:parseFloat(string);

    二、JavaScript 全局属性  

    属性 描述
    Infinity 代表正的无穷大的数值。
    NaN 指示某个值是不是数字值。
    undefined 指示未定义的值。

    三、完整代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript">
           function cal(){
               var nums = document.getElementsByName("num");
               var sz = document.getElementsByName("js");
               var result = document.getElementsByName("rs");
               var n1 = parseFloat(nums[0].value);
               var n2 = parseFloat(nums[1].value);
               /*parseFloat() 函数可解析一个字符串,并返回一个浮点数。
               该函数指定字符串中的首个字符是否是数字。如果是,则对字符
               串进行解析,直到到达数字的末端为止,然后以数字返回该数字,
               而不是作为字符串。
            */
                switch(sz[0].value){
                case "add" : 
                result[0].value = n1 + n2 ;
                break;
                case "min" : 
                result[0].value = n1 - n2 ;
                break;
                case "mul" : 
                result[0].value = n1 * n2 ;
                break;
                case "div" : 
                result[0].value = n1/n2; 
                break;
                  }
              }
          </script>
    </head>
    <body>
        <div align="center">
            <input type="text" name="num" value="" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
            <select name="js" size="1">
                <option value="add">+</option>
                <option value="min">-</option>
                <option value="mul">*</option>
                <option value="div">/</option>
            </select>
       <input type="text" name="num" value=""onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
      =
       <input type="text" name="rs" value=""/><br>
       <button id="btn"onclick="cal()">计算</button>
    </div>
    </body>
    </html>

    效果展示:

    在这里插入图片描述

    jsjswy
    下一篇:没有了