这篇文章主要介绍了基于 javascript 实现简单计算器功能的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
实现代码:
- <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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0409/267789.html