JavaScript

超轻量级php框架startmvc

JavaScript实现的超简单计算器功能示例

更新时间:2020-06-20 14:48:01 作者:startmvc
本文实例讲述了JavaScript实现的超简单计算器功能。分享给大家供大家参考,具体如下:先

本文实例讲述了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 计算器