基于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程序设计有所帮助。