<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var exp = "";
function cal() {
var sum = eval(exp);
var dest = document.getElementById("result");
dest.value = sum;
exp = "";
}
function assign(idName) {
var component = document.getElementById(idName);
exp = exp + (component.value);
var dest = document.getElementById("result");
dest.value = exp;
}
function clearS() {
var dest = document.getElementById("result");
dest.value = "";
exp = "";
}
</script>
</head>
<body>
<span id = "span2" hidden></span>
<input type="" name="" id = "result" style="size: 20 " placeholder="计算结果">
<div>
<button id ="cal1" style="size: 5" value="+" onclick="assign('cal1')">+</button>
<button id ="cal2" style="size: 5" value="-" onclick="assign('cal2')">-</button>
<button id ="cal3" style="size: 5" value="*" onclick="assign('cal3')">*</button>
<button id ="cal4" style="size: 5" value="/" onclick="assign('cal4')">/</button>
</div>
<div>
<button id ="id1" style="size: 5" value="1" onclick="assign('id1')">1</button>
<button id ="id2" style="size: 5" value="2" onclick="assign('id2')">2</button>
<button id ="id3" style="size: 5" value="3" onclick="assign('id3')">3</button>
</div>
<div>
<button id ="id4" style="size: 5" value="4" onclick="assign('id4')">4</button>
<button id ="id5" style="size: 5" value="5" onclick="assign('id5')">5</button>
<button id ="id6" style="size: 5" value="6" onclick="assign('id6')">6</button>
</div>
<div>
<button id ="id7" style="size: 5" value="7" onclick="assign('id7')">7</button >
<button id ="id8" style="size: 5" value="8" onclick="assign('id8')">8</button>
<button id ="id9" style="size: 5" value="9" onclick="assign('id9')">9</button>
</div>
<button id="btn" onclick="cal()">计算</button>
<button id="clear" onclick="clearS()">清除</button>
<span id = "span1"></span>
</body>
</html>
JavaScript实现简单计算器(计算公式方式)
最新推荐文章于 2024-08-22 19:52:30 发布