<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script>
function sum() {
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var r = document.getElementById("sum");
var v = document.getElementById("sym").value;
eval("var s="+";r.value=a s b");
eval("var sum=0; r.value=a+b");
eval("r.value=a+b");
}
</script>
</head>
<body>
<input type="text" id="a">
<select name="" id="sym">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="b">=
<input type="text" id="sum">
<button οnclick="sum();">计算</button>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器简版</title>
</head>
<script>
function myfun() {
var a=document.getElementById("a").value;
var b=document.getElementById("b").value;
//获取操作符的值
var sym=document.getElementById("sym").value;
var r=document.getElementById("r");
//定义一个变量来存放计算的结果
/* var temp=0;
if(sym=="+"){
temp=Number(a)+Number(b);
}
//获取input对象并给对象value的属性赋值
var rObj=document.getElementById("r");
rObj.value=temp;
*/
r.value=eval(a+sym+b); /*eval将字符串转换为JS代码*/
}
</script>
<body>
<input type="text" id="a">
<select name="" id="sym">
<option value="+">加</option>
<option value="-">减</option>
<option value="*">乘</option>
<option value="/">除</option>
</select>
<input type="text" id="b">=
<input type="text" id="r" οnclick="myfun();" >
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style>
table {
width: 232px;
height: 320px;
}
td {
width: 58px;
height: 60px;
background: #e0e0e0;
text-align: center;
}
td:last-child {
background: #f79331;
color: #fff;
}
div {
width: 232px;
height: 80px;
border: none;
text-align: right;
background: #636363;
color: #fff;
font-size: 50px;
line-height: 80px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="r">0</div>
<table onClick="calculater()">
<tr>
<td οnclick="chongzhi()">AC</td>
<td>+/-</td>
<td>%</td>
<td>/</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td colspan="2">0</td>
<td>.</td>
<td οnclick="resultscalcaulte()">=</td>
</tr>
</table>
<script>
var results = "";
var calresults = "";
function chongzhi() {
}
function calculater() {
if (event.srcElement.innerText == "=") {
return ;
}
results += event.srcElement.innerText;
r.innerText = results;
// 重置计算器
if(event.srcElement.innerText =="AC"){
document.getElementById('r').innerHTML='0';
results="";
}
}
function resultscalcaulte() {
calresults = eval(results);
r.innerText = calresults;
}
document.getElementById('r').innerHTML='0';
</script>
</body>
</html>