每当我添加包含所有输入的 div 框时，它们就会停止工作，请有人帮忙。 div 框是我能想到的将输入保持在该布局中的唯一方法。我对 javascript 和将它集成到 html 中还是很陌生。感谢您的阅读。
#ans_box {
width:500px;
height:30px;
background-color:silver;
position:relative;
margin-bottom:90%;
}
#demo {
position:relative;
width:500px;
height:30px;
}
.button {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
z-index:-1;
float:left;
padding:5px 8px;
}
.button2 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;
margin-top:6%;
margin-right:1%;
z-index:-2;
padding:5px 8px;
}
.button3 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
z-index:-3;
padding:5px 8px;
}
.button4 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;
z-index:-4;
padding:5px 8px;
}
#boundry{
width:180px;
height:500px;
}<!DOCTYPE html>
<html>
<body>
<form name="calculator" >
<div id="boundry">
<input class="button" type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input class="button" type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input class="button" type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input class="button" type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input class="button2" type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input class="button2" type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input class="button2" type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input class="button2" type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input class="button3" type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input class="button3" type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input class="button3" type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input class="button3" type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input class="button4" type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input class="button4" type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input class="button4" type="reset" value="Reset">
<input class="button" type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<input type="textfield" name="ans" value="">
</div>
</form>
</body>
</html>最佳答案
实际上您的点击是有效的....但由于使用了 z-index，它没有显示。 这是一个fiddle link ...这是有效的。 为了您的方便……这里是 HTML 代码:
<form name="calculator" >
<div id="boundry">
<input class="button" id="box" type="button" value="1"
onClick="document.calculator.ans.value+='1'">
<input class="button" id="box" type="button" value="2"
onClick="document.calculator.ans.value+='2'">
<input class="button" id="box" type="button" value="3"
onClick="document.calculator.ans.value+='3'">
<input class="button" id="box" type="button" value="+"
onClick="document.calculator.ans.value+='+'">
<input class="button" id="box1" type="button" value="4"
onClick="document.calculator.ans.value+='4'">
<input class="button6" id="box1" type="button" value="5"
onClick="document.calculator.ans.value+='5'">
<input class="button7" id="box1" type="button" value="6"
onClick="document.calculator.ans.value+='6'">
<input class="button8" id="box1" type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input class="button9" id="box3" type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input class="button10" id="box3" type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input class="button11" id="box3" type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input class="button12" id="box3" type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input class="button13" id="box4" type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input class="button14" id="box4" type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input class="button15" id="box4" type="reset" value="Reset">
<input class="button" id="box4" type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<input type="textfield" name="ans" value="">
</div>
</form>
和 CSS:
#ans_box {
width:500px;
height:30px;
background-color:silver;
position:relative;
margin-bottom:90%;
}
#demo {
position:relative;
width:500px;
height:30px;
}
#box {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;
padding:5px 8px;
}
#box1 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;
margin-top:6%;
margin-right:1%;
padding:5px 8px;
}
#box3 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
padding:5px 8px;
}
#box4 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;
padding:5px 8px;
}
#boundry{
width:180px;
height:500px;
}
对您的 css 和 html 进行一点修改...添加另一个 id 以便清楚地理解。
关于javascript - 我的 javascript 计算器不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44476955/