Home >Web Front-end >JS Tutorial >Implementing simple calculator function based on javascript_javascript skills

Implementing simple calculator function based on javascript_javascript skills

WBOYOriginal: 2016-05-16 15:22:151163browse

The example in this article introduces the detailed code of javascript to implement a simple calculator function, and shares it with you for your reference. The specific content is as follows

Rendering:

Implementation code:

<html> 
  <head> 
    <script> 
      function calc(event){ 
        // test  
        //window.alert(event.value); 
        var val = new String(event.value); 
        // clear space 
        val = val.trim(); 
        var res = document.getElementById("res"); 
        // clear 
        if(val == "clear"){ 
          res.value = ""; 
        } 
 
        // back 
        if(val == "back"){ 
          res.value = res.value.substring(0, res.value.length - 1); 
        } 
 
        // power 
        if(val == "power"){ 
          val = "p"; 
        } 
        // add val to text 
        if(val.length == 1 && val != "="){ 
          res.value = res.value + val; 
        } 
  
        // calc result 
        if(val == "="){ 
          var arr; 
          var result; 
          // power 
          if(res.value.indexOf("p") != -1){ 
            arr = res.value.split("p"); 
            //window.alert(arr); 
             result = Math.pow(parseFloat(arr[0]) ,parseFloat(arr[1])); 
            //window.alert(res); 
            res.value = result; 
          }       
          // plus 
          if(res.value.indexOf("+") != -1){ 
            arr = res.value.split("+"); 
            //window.alert(arr); 
             result = parseFloat(arr[0]) + parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } else if(res.value.indexOf("-") != -1){ 
            // minus 
            arr = res.value.split("-"); 
            //window.alert(arr); 
            result = parseFloat(arr[0]) - parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } else if(res.value.indexOf("*") != -1){ 
            // multiply 
            arr = res.value.split("*"); 
            //window.alert(arr); 
            result = parseFloat(arr[0]) * parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } else if(res.value.indexOf("/") != -1){ 
            // division 
            arr = res.value.split("/"); 
            //window.alert(arr); 
            result = parseFloat(arr[0]) / parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } else if(res.value.indexOf("%") != -1){ 
            // module 
            arr = res.value.split("%"); 
            //window.alert(arr); 
            result = parseFloat(arr[0]) % parseFloat(arr[1]); 
            //window.alert(res); 
            res.value = result; 
          } 
        }   
      } 
    </script> 
  </head> 
  <body> 
    <table border="1px" cellpadding="10px" cellspacing="5px" align="center"> 
      <tr align="center"> 
        <td colspan="4"><input type="text" id="res" size="35px" value="" style="text-align:right;"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="power" onclick="calc(this)"/></td> 
        <td><input type="button" value="clear" onclick="calc(this)"/></td> 
        <td colspan="2"><input type="button" value="   back   " onclick="calc(this)"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="  1  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  2  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  3  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  +  " onclick="calc(this)"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="  4  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  5  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  6  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  -  " onclick="calc(this)"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="  7  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  8  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  9  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  *  " onclick="calc(this)"/></td> 
      </tr> 
      <tr align="center"> 
        <td><input type="button" value="  0  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  =  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  %  " onclick="calc(this)"/></td> 
        <td><input type="button" value="  /  " onclick="calc(this)"/></td> 
      </tr> 
    </table> 
  </body> 
</html>

I hope this article will be helpful to everyone learning JavaScript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript basic grammar study notes_javascript skillsNext article：JavaScript basic grammar study notes_javascript skills

See more

Implementing simple calculator function based on javascript_javascript skills

Related articles