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计算器
网页特效|XFBBS.Com|---功能很全的精品计算器 P { FONT-SIZE: 9pt; FONT-FAMILY: "Verdana" } TD { FONT-SIZE: 9pt; LINE-HEIGHT: normal } A { FONT-SIZE: 9pt; TEXT-TRANSFORM: none; COLOR: #326969; TEXT-DECORATION: none } A:hover { FONT-SIZE: 9pt; LEFT: 1px; COLOR: #0
-
html+js实现简单的计算器代码(加减乘除)
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&
-
js网页版计算器的简单实现
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&
-
javascript简单计算器 可美化
JS计算器代码: javascript简单计算器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 说明: JavaScript eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函数传递 String 对象来作为参数. 如果试图
-
纯javascript代码实现计算器功能(三种方法)
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q
-
js表达式计算器代码
效果图: 代码: // [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章: JS实现简单的二元方程计算器功能示例 JS求解三元一次方程组值的方法 javascript写的简单的计算器,内容很多,方法实用,推荐 用JS写的简单的计算器实现代码 js实现简单计算器 网页计算器 一个JS计算器 js网页版计算器的简单实现 纯javascript代码实现计算器功能(三种方法) js的表单操作 简单计算器 javascript简单计算器 可美化 js实现模拟计算器退格键删除文
-
js实现模拟计算器退格键删除文字效果的方法
本文实例讲述了js实现模拟计算器退格键删除文字效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
-
简易js代码实现计算器操作
复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--
-
javascript写的简单的计算器，内容很多，方法实用，推荐
最近用javascript写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面: 界面就是这样了,但是功能如何呢? 现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算.如果发生被除数为零的错误,下面会给出提示,就像这样: 自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习.如果有高手看出里面的疏漏.错误等望不吝赐教,给予指点. 下面贴上代码,希望里面的注释足够多了. js部分: 复制代码 代码如下: var num=0,resul
-
JSP实现计算器功能（网页版）
jsp实现网页计算器代码如下:只有两个jsp页面 myCal.jsp如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getS
-
javascript-简单的计算器实现步骤分解(附图)
知识点: 1.数学运算"+,-,*,/"的使用 2.输入内容的判断,对于事件对象的来源的判断 效果: 代码: 复制代码 代码如下: <style> #calculate { line-height: 60px; text-align: center; background: #ccc; font-size: 16px; font-weight: bold; } #calculate tbody input{ width: 100%; height: 60px; back