本文目录一览：
js简易计算器代码
- html是从上往下逐行执行的，当执行到
var resultValue=document.getElementById("result").value;时id为result的页面元素还没有创建，所以出错。应该把这句放在getNum函数里面。 - getNum函数应该这样写：
function getNum(num) {
var result = document.getElementById("result");
result.value += num;
}
- 双引号里面应为单引号：
onclick="getNum('9')"
如何用js做一个简易计算器？
js做一个简易计算器具体如下：
HTML
<head>
<title>js运算</title>
</head>
<body>
<table>
<tr>
<td>第一个数</td>
<td><input type="text" id="onesum" /></td>
</tr>
<tr>
<td>运算符号</td>
<td><input type="text" id="fh" /></td>
</tr>
<tr>
<td>第二个数</td>
<td><input type="text" id="twosum" /></td>
</tr>
<tr>
<td>计算结果</td>
<td><input type="text" id="sum" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value=" 计算 " onclick="js()" /></td>
</tr>
</table>
<script>
function js() {
var num1 = document.getElementById("onesum").value;
var num2 = document.getElementById("twosum").value;
var fh = document.getElementById("fh").value;
var sum = 0;
num1 = Number(num1);
num2 = Number(num2);
if (fh == '+') {
sum = num1 + num2;
} else if (fh == '-') {
sum = num1 - num2;
} else if (fh == '*') {
sum = num1 * num2;
} else if (fh == '/') {
sum = num1 / num2;
}
document.getElementById("sum").value = sum;
}
</script>
</body>
JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
计算器怎么用JS写
<form name="Calc">
<table border="4">
<tr>
<td>
<input type="text" name="Input" size="16" /><br />
</td>
</tr>
<tr>
<td>
<input type="button" name="one" value=" 1 " OnClick="Calc.Input.value += '1'" />
<input type="button" name="two" value=" 2 " OnCLick="Calc.Input.value += '2'" />
<input type="button" name="three" value=" 3 " OnClick="Calc.Input.value += '3'" />
<input type="button" name="plus" value=" + " OnClick="Calc.Input.value += ' + '" /><br />
<input type="button" name="four" value=" 4 " OnClick="Calc.Input.value += '4'" />
<input type="button" name="five" value=" 5 " OnCLick="Calc.Input.value += '5'" />
<input type="button" name="six" value=" 6 " OnClick="Calc.Input.value += '6'" />
<input type="button" name="minus" value=" - " OnClick="Calc.Input.value += ' - '" /><br />
<input type="button" name="seven" value=" 7 " OnClick="Calc.Input.value += '7'" />
<input type="button" name="eight" value=" 8 " OnCLick="Calc.Input.value += '8'" />
<input type="button" name="nine" value=" 9 " OnClick="Calc.Input.value += '9'" />
<input type="button" name="times" value=" x " OnClick="Calc.Input.value += ' * '" /><br />
<input type="button" name="clear" value=" c " OnClick="Calc.Input.value = ''" />
<input type="button" name="zero" value=" 0 " OnClick="Calc.Input.value += '0'" />
<input type="button" name="DoIt" value=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)" />
<input type="button" name="div" value=" / " OnClick="Calc.Input.value += ' / '" /><br />
</td>
</tr>
</table>
</form>
简易计算器js代码
是点击0-9然后点击加减乘除吗？ 原理：获取第一个值，获取运算符，获取第二个值，直接用js相应的运算符计算出值，然后显示到相应位置。如果再次点击运算符，则把此结果当做第一个值，重复前面的程序。如果是点击的数字，则把第一个值重新赋值，执行前面的程序。 按键盘的话？ 原理：需要正则匹配。
用js代码做一个简易计算器
function test() {
var txt1 = document.getElementById("txt1"),
txt2 = document.getElementById("txt2"),
txt3 = document.getElementById("txt3"),
opt = document.getElementById("sel");
txt3.value = eval(txt1.value + opt.value + txt2.value); // eval函数可计算某个字符串，并执行其中的js代码
}
<input type="text" id="txt1" />
<select id="sel">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="txt2" /> =
<input type="text" id="txt3" />
<input type="button" id="btn" value="计算" onclick="test()" />
如何使用javascript编写一个计算器
首先，由于JS的存在数值的精度误差问题：
0.1 + 0.2 // 0.30000000000000004
0.3 - 0.1 // 0.19999999999999998
所以在编写计算器时应首先解决计算精度问题，以下四个代码段分别是js中精确的加减乘除运算函数：
浮点数加法运算
function floatAdd(arg1, arg2) {
var r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
return (arg1 * m + arg2 * m) / m;
}
浮点数减法运算
function floatSub(arg1, arg2) {
var r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
// 动态控制精度长度
n = (r1 = r2) ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
}
浮点数乘法运算
function floatMul(arg1, arg2) {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString();
try {
m += s1.split(".")[1].length;
} catch (e) {}
try {
m += s2.split(".")[1].length;
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}
浮点数除法运算
function floatDiv(arg1, arg2) {
var t1 = 0,
t2 = 0,
r1,
r2;
try {
t1 = arg1.toString().split(".")[1].length;
} catch (e) {}
try {
t2 = arg2.toString().split(".")[1].length;
} catch (e) {}
with (Math) {
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * pow(10, t2 - t1);
}
}
以下是详细的计算器代码：
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>简单计算器</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div id="calculator">
<div id="calculator_container">
<h3>计算器</h3>
<table id="calculator_table">
<tbody>
<tr>
<td colspan="5">
<input type="text" id="resultIpt" readonly="readonly" value="" size="17" maxlength="17" style="width:294px;color: black" />
</td>
</tr>
<tr>
<td><input type="button" value="←" class="btn_color1 btn_operation" /></td>
<td><input type="button" value="全清" class="btn_color1 btn_operation" /></td>
<td><input type="button" value="清屏" class="btn_color1" /></td>
<td><input type="button" value="﹢/﹣" class="btn_color2 btn_operation" /></td>
<td><input type="button" value="1/×" class="btn_color2 btn_operation" /></td>
</tr>
<tr>
<td><input type="button" value="7" class="btn_color3 btn_number" /></td>
<td><input type="button" value="8" class="btn_color3 btn_number" /></td>
<td><input type="button" value="9" class="btn_color3 btn_number" /></td>
<td><input type="button" value="÷" class="btn_color4 btn_operation" /></td>
<td><input type="button" value="％" class="btn_color2 btn_operation" /></td>
</tr>
<tr>
<td><input type="button" value="4" class="btn_color3 btn_number" /></td>
<td><input type="button" value="5" class="btn_color3 btn_number" /></td>
<td><input type="button" value="6" class="btn_color3 btn_number" /></td>
<td><input type="button" value="×" class="btn_color4 btn_operation" /></td>
<td><input type="button" value="√" class="btn_color2 btn_operation" /></td>
</tr>
<tr>
<td><input type="button" value="1" class="btn_color3 btn_number" /></td>
<td><input type="button" value="2" class="btn_color3 btn_number" /></td>
<td><input type="button" value="3" class="btn_color3 btn_number" /></td>
<td><input type="button" value="－" class="btn_color4 btn_operation" /></td>
<td rowspan="2">
<input type="button" value="＝" class="btn_color2" style="height: 82px" id="simpleEqu" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="0" class="btn_color3 btn_number" style="width:112px" />
</td>
<td><input type="button" value="." class="btn_color3 btn_number" /></td>
<td><input type="button" value="＋" class="btn_color4 btn_operation" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>
CSS3
* {
margin: 0;
padding: 0;
}
#calculator {
position: relative;
margin: 50px auto;
width: 350px;
height: 400px;
border: 1px solid gray;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 4px gray;
-moz-box-shadow: 2px 2px 4px gray;
box-shadow: 2px 2px 4px gray;
behavior: url("ie-css3.htc"); /*IE8-*/
}
#calculator_table {
position: relative;
margin: 10px auto;
border-collapse: separate;
border-spacing: 10px 20px;
}
h3 {
position: relative;
width: 60px;
height: 30px;
margin: 0 auto;
}
#calculator_table td {
width: 50px;
height: 30px;
border: 1px solid gray;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
behavior: url("ie-css3.htc"); /*IE8-*/
}
#calculator_table td input {
font-size: 16px;
border: none;
width: 50px;
height: 30px;
color: white;
}
input.btn_color1 {
background-color: orange;
}
input.btn_color2 {
background-color: #133645;
}
input.btn_color3 {
background-color: #59807d;
}
input.btn_color4 {
background-color: seagreen;
}
input:active {
-webkit-box-shadow: 3px 3px 3px gray;
-moz-box-shadow: 3px 3px 3px gray;
box-shadow: 3px 3px 3px gray;
behavior: url("ie-css3.htc"); /*IE8-*/
}
JS
window.onload = function () {
var resultIpt = document.getElementById("resultIpt"); // 获取输出文本框
var btns_number = document.getElementsByClassName("btn_number"); // 获取数字输入按钮
var btns_operation = document.getElementsByClassName("btn_operation"); // 获取操作按钮
var simpleEqu = document.getElementById("simpleEqu"); // 获取"="按钮
var temp = "";
var num1 = 0,
num2 = 0;
// 获取第一个数
for (var i = 0; i < btns_number.length; i++) {
btns_number[i].onclick = function () {
temp += this.value;
resultIpt.value = temp;
};
}
// 对获取到的数进行操作
for (var j = 0; j < btns_operation.length; j++) {
btns_operation[j].onclick = function () {
num1 = parseFloat(resultIpt.value);
oper = this.value;
if (oper == "1/×") {
num1 = Math.pow(num1, -1); // 取倒数
resultIpt.value = num1.toString();
} else if (oper == "﹢/﹣") { // 取相反数
num1 = -num1;
resultIpt.value = num1.toString();
} else if (oper == "√") { // 取平方根
num1 = Math.sqrt(num1);
resultIpt.value = num1.toString();
} else if (oper == "←") { // 删除个位
resultIpt.value = resultIpt.value.substring(0, resultIpt.value.length - 1);
} else if (oper == "全清") { // 清除数字
resultIpt.value = "";
} else { // oper=="＋" "－" "×" "÷" "％"时，继续输入第二数字
temp = "";
resultIpt.value = temp;
}
};
}
// 输出结果
simpleEqu.onclick = function () {
num2 = parseFloat(temp); // 取得第二个数字
calculate(num1, num2, oper);
resultIpt.value = result.toString();
};
};
// 定义一个计算函数
function calculate(num1, num2, oper) {
switch (oper) {
case "＋":
result = floatAdd(num1, num2); // 求和
break;
case "－":
result = floatSub(num1, num2); // 求差
break;
case "×":
result = floatMul(num1, num2); // 求积
break;
case "÷":
result = floatDiv(num1, num2); // 求商
break;
case "％":
result = num1 % num2; // 求余数
break;
}
}
// 精确计算
// 浮点数加法运算
function floatAdd(arg1, arg2) {
var r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
return (arg1 * m + arg2 * m) / m;
}
// 浮点数减法运算
function floatSub(arg1, arg2) {
var r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
// 动态控制精度长度
n = (r1 = r2) ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
}
// 浮点数乘法运算
function floatMul(arg1, arg2) {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString();
try {
m += s1.split(".")[1].length;
} catch (e) {}
try {
m += s2.split(".")[1].length;
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}
// 浮点数除法运算
function floatDiv(arg1, arg2) {
var t1 = 0,
t2 = 0,
r1,
r2;
try {
t1 = arg1.toString().split(".")[1].length;
} catch (e) {}
try {
t2 = arg2.toString().split(".")[1].length;
} catch (e) {}
with (Math) {
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * pow(10, t2 - t1);
}
}
