信鸽网

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

  作者：bea

本文实例为大家介绍javascript实现简单计算器功能的详细代码，分享给大家供大家参考，具体内容如下 效果图： 实现代码： <html> <head> <script> function calc(event){ // test //window.alert(event.value); var val = new String(event.value);

本文实例为大家介绍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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: