JavaScript实现的超简单计算器功能示例
2017-12-23 12:37
1206 查看
本文实例讲述了JavaScript实现的超简单计算器功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS计算器</title> <script type="text/javascript"> // window.onload 获取元素getElementById window.onload = function(){ var oTxt1 = document.getElementById('val01'); var oTxt2 = document.getElementById('val02'); var oFuhao = document.getElementById('fuhao'); // 这三个要放在button函数里面,因为s1.value是获取input里面的输入,但是这个时候还没有输入了 // var iNum1 = oTxt1.value; // var iNum2 = oTxt2.value; // var iNum3 = oFuhao.value; oBtn = document.getElementById('btn'); // 计算按钮点击事件 oBtn.onclick = function(){ var iNum1 = oTxt1.value; var iNum2 = oTxt2.value; var iNum3 = oFuhao.value; var iResult; //如果两个输入有一个是空的话 //return是让if里面执行结束 if (iNum1=='' || iNum2=='') { alert('不能为空'); return; } //isNaN() 如果是true,说明是非数字,所以如果两个输入中有非数字,就提示alert if (isNaN(iNum1) || isNaN(iNum2)) { alert('不能有字母'); return; } //对+-*/四个操作对应的value进行判断 //如果直接iNum1+iNum2 输出的结果是字符串的拼接 12+24 1224 所以要转换成parseInt整数 if (iNum3 == 0) { iResult = parseInt(iNum1) + parseInt(iNum2) } else if (iNum3 == 1) { iResult = parseInt(iNum1) - parseInt(iNum2) } else if (iNum3 == 2) { iResult = parseInt(iNum1) * parseInt(iNum2) } else if (iNum3 == 3) { iResult = parseInt(iNum1)/parseInt(iNum2) } alert(iResult); } } </script> </head> <body> <h3>计算器</h3> <input type="text" id="val01"> <select id="fuhao"> <option value="0">+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">/</option> </select> <input type="text" id="val02"> <input type="button" id="btn" value="计算"> </body> </html>
PS:这里再为大家推荐几款计算工具供大家进一步参考借鉴:
在线一元函数(方程)求解计算工具:
http://tools.jb51.net/jisuanqi/equ_jisuanqi
科学计算器在线使用_高级计算器在线计算:
http://tools.jb51.net/jisuanqi/jsqkexue
在线计算器_标准计算器:
http://tools.jb51.net/jisuanqi/jsq
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JavaScript实现的简单Tab点击切换功能示例
- JavaScript实现简单的隐藏式侧边栏功能示例
- JavaScript基于DOM操作实现简单的数学运算功能示例
- javascript实现非常简单的小数取整功能示例
- JavaScript简单实现关键字文本搜索高亮显示功能示例
- 原生JavaScript实现的简单省市县三级联动功能示例
- java实现一个简单的HTTP服务器,带打开网页和计算功能
- Asp.net 2.0 自定义控件开发[实现自动计算功能(AutoComputeControl)][示例代码下载]
- Asp.net 2.0 自定义控件开发[实现自动计算功能(AutoComputeControl)][示例代码下载]
- javascript实现简单的ajax封装示例
- C#摄像头实现拍照功能的简单代码示例
- Android 框架设计Demo,一个简单的MVP示例搜索功能,网络请求用Retrofit+RxJava实现
- iOS App中实现播放音效和音乐功能的简单示例
- JS实现的简单下拉框联动功能示例
- 非常简单的兼容多浏览器Javascript实现分页功能
- C#摄像头实现拍照功能的简单代码示例
- JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
- javascript实现简单的可随机变色网页计算器示例
- jQuery实现的简单前端搜索功能示例
- 微信小程序实现简单input正则表达式验证功能示例