基于javascript实现简单计算器功能
2016-01-03 00:00
691 查看
本文实例为大家介绍javascript实现简单计算器功能的详细代码,分享给大家供大家参考,具体内容如下
效果图:
实现代码:
希望本文所述对大家学习javascript程序设计有所帮助。
用JS写的简单的计算器实现代码
javascript写的简单的计算器,内容很多,方法实用,推荐
js的表单操作 简单计算器
简易js代码实现计算器操作
javascript-简单的计算器实现步骤分解(附图)
js网页版计算器的简单实现
网页计算器 一个JS计算器
使用jsp调用javabean实现超简单网页计算器示例
效果图:
实现代码:
<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程序设计有所帮助。
您可能感兴趣的文章:
功能很全的精品JS计算器用JS写的简单的计算器实现代码
javascript写的简单的计算器,内容很多,方法实用,推荐
js的表单操作 简单计算器
简易js代码实现计算器操作
javascript-简单的计算器实现步骤分解(附图)
js网页版计算器的简单实现
网页计算器 一个JS计算器
使用jsp调用javabean实现超简单网页计算器示例
相关文章推荐
- js中利用tagname和id获取元素的方法
- 详解js中class的多种函数封装方法
- 实例讲解避免javascript冲突的方法
- 基于javascript实现窗口抖动效果
- 全面理解Javascript闭包和闭包的几种写法及用途
- 使用 Sublime Text 做 Javascript 编辑器 - 集成 SublimeCodeIntel 实现代码智能提示及自动完成
- 使用 Sublime Text 做 Javascript 编辑器 - 集成 JSHint 问题检测工具
- JS编程练习
- 利用JSPTagEx开发单页面全程Ajax应用(附源码)
- JS 鼠标滚轮事件(mousewheel/DOMMouseScroll)
- package.json 字段全解析 share
- package.json 字段全解析 share
- JS入门总结
- (Frontend Newbie)JavaScript基础之常见数据类型
- js 闭包的理解
- 购物车角标JSBadgeView的基本使用
- 百度地图点击覆盖物,显示信息框js代码
- 265行JavaScript代码的第一人称3D H5游戏Demo【个人总结1】
- Javascript显示和隐式类型转换
- JSP标签