这是我到目前为止所拥有的。进入计算后，我很难让计算器清除。一旦我得到答案，它会在输入数字的框中显示NAN。建议会很棒！ 谢谢
<HTML>
<HEAD>
<script type = "text/javascript">
function divide()
{
document.calculator.output.value += "/";
}
function add()
{
document.calculator.output.value += "+";
}
function num9()
{
document.calculator.output.value += "9";
}
function num8()
{
document.calculator.output.value += "8";
}
function num7()
{
document.calculator.output.value += "7";
}
function multiply()
{
document.calculator.output.value += "*";
}
function percent()
{
document.calculator.output.value += "%";
}
function num6()
{
document.calculator.output.value += "6";
}
function num5()
{
document.calculator.output.value += "5";
}
function num4()
{
document.calculator.output.value += "4";
}
function subtr()
{
document.calculator.output.value += "-";
}
function num3()
{
document.calculator.output.value += "3";
}
function num2()
{
document.calculator.output.value += "2";
}
function num1()
{
document.calculator.output.value += "1";
}
function numZero()
{
document.calculator.output.value += "0";
}
function buildFormula()
{
var evalu= alert(eval(document.calculator.output.value)) + document.clear();
document.calculator.output.value= evalu;
}
</script>
</HEAD>
<BODY>
<form name="calculator">
<table border=0>
<tr>
<td colspan=4><input type=text readonly=true name="output" size = 25></td>
</tr>
<tr>
<td><input type=button value= " 7 " onClick="num7()"></td>
<td><input type=button value= " 8 " onClick="num8()"></td>
<td><input type=button value= " 9 " onClick="num9()"></td>
<td><input type=button value= " / " onClick="divide()"></td>
<td><input type=button value= " + " onClick="add()"></td>
</tr>
<tr>
<td><input type=button value= " 4 " onClick="num4()"></td>
<td><input type=button value= " 5 " onClick="num5()"></td>
<td><input type=button value= " 6 " onClick= "num6()"></td>
<td><input type=button value= " * " onClick= "multiply()"></td>
<td><input type=button value= " % " onClick="percent()"></td>
</tr>
<tr>
<td><input type=button value = " 1 " onClick="num1()"></td>
<td><input type=button value = " 2 " onClick="num2()"></td>
<td><input type=button value = " 3 " onClick="num3()"></td>
<td><input type=button value = " - " onClick="subtr()"></td>
<td><input type=button value = " = " onClick="buildFormula()"></td>
</tr>
<tr>
<td colspan=5><input type=button value = " 0 " onClick="numZero()"></td>
</tr>
</table>
</form>
</BODY>
</HTML>
答案 0 :(得分：0)
如果您使用HTML并确保html有效，则应指定doctype。
最好不要将html与javascript混合，因此在JavaScript中添加addEventListener的事件处理程序
最好将事件监听器添加到包含按钮的容器中，而不是将其添加到每个按钮。
最好在有意义的地方添加脚本。将脚本放在头部并尝试将事件处理程序添加到不存在的元素中并没有多大意义。添加额外的脚本来补偿（body.onload）仍然不如在内容的末尾添加脚本那么好。
你仍然需要编写switch语句（如果它是作业）来计算结果，但数字存储在calc.numbers和calc.operators中的运算符中：
<!DOCTYPE html>
<HTML>
<HEAD>
<title>My calc</title>
</HEAD>
<BODY>
<form name="calculator">
<table id="buttons">
<tr>
<td colspan=4><div id="output"></div></td>
</tr>
<tr>
<td><input type=button value= " 7 " ></td>
<td><input type=button value= " 8 " ></td>
<td><input type=button value= " 9 " ></td>
<td><input type=button value= " / " ></td>
<td><input type=button value= " + " ></td>
</tr>
<tr>
<td><input type=button value= " 4 " ></td>
<td><input type=button value= " 5 " ></td>
<td><input type=button value= " 6 " ></td>
<td><input type=button value= " * " ></td>
<td><input type=button value= " % " ></td>
</tr>
<tr>
<td><input type=button value = " 1 " ></td>
<td><input type=button value = " 2 " ></td>
<td><input type=button value = " 3 " ></td>
<td><input type=button value = " - " ></td>
<td><input type=button value = " = " ></td>
</tr>
<tr>
<td colspan=5><input type=button value = " 0 " ></td>
</tr>
</table>
</form>
<script>
var calc={
curNum:[],
numbers:[],
operators:[],
output:document.getElementById("output"),
clickHandler:function(e){
var ev=e||window.event;
var nr=parseInt(ev.target.value);
if(isNaN(nr)){
calc.handleOperator(ev.target.value);
return;
}
calc.curNum.push(nr);
calc.output.innerHTML=calc.curNum.join("");
},
handleOperator:function(val){
if(val===" = "){
calc.calculateResult();
return;
}
if(calc.curNum.length===0&&calc.numbers.length===0){
return;
}
// when you press + and then % (replace + with %)
if(calc.curNum.length===0&&calc.operators.length){
calc.operators[calc.operators.length-1]=val;
}else{
calc.operators.push(val);
}
calc.numbers.push(parseInt(calc.curNum.join("")));
// reset current number
calc.curNum=[];
},
calculateResult:function(){
//you could use switch here but it's complecated
// to implement 3+2*6 so using eval instead
// if for your homework you need to use switch then good luck
// based on the above example you have to calculate 2*6 first
// so you'll have to loop through the calc.operators a couple of times
if(calc.curNum.length){
calc.numbers.push(parseInt(calc.curNum.join("")));
}
var i=0,op,res=[];
for(i=0;i<calc.numbers.length;i=i+1){
op = ((i)===calc.operators.length)?"":calc.operators[i];
res.push(calc.numbers[i]);
res.push(op);
}
calc.numbers=[];
calc.operators=[];
console.log(res);
calc.output.innerHTML=(eval(res.join("")));
calc.curNum=[];
calc.curNum.push(parseInt(calc.output.innerHTML));
}
}
document.getElementById("buttons").addEventListener("click",calc.clickHandler);
</script>
</BODY>
</HTML>