JavaScript实现的超简单计算器功能示例
更新时间：2017年12月23日 12:37:54 作者：ketchup_酱
这篇文章主要介绍了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相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了JS中捕获console.log()输出的方法,实例分析了实现获取console.log输出的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
javascript 处理table表格的代码，学习js的朋友可以参考下。2010-12-12
javascript 制作坦克大战游戏初步 图片与代码...2007-11-11
这篇文章主要介绍了Hammer.js+轮播原理实现简洁的滑屏功能的相关资料,需要的朋友可以参考下2016-02-02
最近在网上查阅了不少Javascript闭包(closure)相关的资料，写的大多是非常的学术和专业。对于初学者来说别说理解闭包了，就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Javascript闭包的真实面目。2010-12-12
JavaScript中,可以使用解构赋值的方式来对数组或者对象进行变量解构,下面小编就来为大家详细介绍一下JavaScript实现数组或者对象解构的方法吧2023-11-11
这篇文章主要介绍了JS实现页面侧边栏效果探究,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了uniapp如何使用 web-view 与网页互相通信,在APP中使用 this.$scope.$getAppWebview() 获取webview对象实例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了JavaScript判断数据类型有几种方法及区别介绍,本文给大家分享多种方法通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
本篇文章主要介绍了博客内容进度插件的实现方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论