基于javascript实现简单计算器功能

前端技术 2023/09/09 JavaScript

本文实例为大家介绍javascript实现简单计算器功能的详细代码，分享给大家供大家参考，具体内容如下

效果图：

实现代码：

<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>

希望本文所述对大家学习javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/25662

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案