HTML input two numbers to achieve the function of addition, subtraction, multiplication and division

Time:2021-7-14

1、 Parsefloat() function
 

Make a simple calculator in the web page, and input two numbers in the text box to realize the addition, subtraction, multiplication and division of two numbers.
The parsefloat() function parses a string and returns a floating-point number.
This function specifies whether the first character in a string is a number. If so, the
The string is parsed until it reaches the end of the number, and then the number is returned as a number,
Not as a string.
Syntax: parsefloat (string);

2、 JavaScript global properties

 

attribute describe
Infinity A number representing a positive infinity.
NaN Indicates whether a value is a numeric value.
undefined Indicates an undefined value.

3、 Complete code

<!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);
           /*The parsefloat() function parses a string and returns a floating-point number.
           This function specifies whether the first character in a string is a number. If so, the
           The string is parsed until it reaches the end of the number, and then the number is returned as a number,
           Not as a string.
        */
            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()" > calculation
</div>
</body>
</html>

Effect display:

在这里插入图片描述

So far, this article about html input two numbers to achieve addition, subtraction, multiplication and division is introduced here. For more related HTML addition, subtraction, multiplication and division content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]