在计算器

时间:2015-12-03 15:26:22

标签: javascript html

有人可以帮我怎么做吗?这是我的计算器而不是使用鼠标我想使用键盘功能。我该怎么做?下面是我的计算器的完整代码。

<html>
<head></head>
<style>
input[type=button] {
    color:white;
    border:0;
    display:block;
    height:110px;
    width: 90px;
	font-family: Broadway;
	font-size:200%;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	margin: 0 7px 11px 0;
	transition: all 0.2s ease;
}
td{
	background-color:;
	
	

}
input[type=text] {
    color:black;
	font-size:300%;
    	height:100px;
	border-radius: 5px;
	 
	
}
#calculator {
	width: 425px;
	height: auto;
	
	margin: 100px auto;
	padding: 20px 20px 9px;
	
	background: #9dd2ea;
	background: linear-gradient(#9dd2ea, #8bceec);
	border-radius: 3px;
	box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
	
}

p{
	color:grey;
}

#clear{
	height:2px;
	width:2px;
	background-color: red;
}



</style>

<body background="background.jpg">


<div style="background-color: " id=calculator>

<center>
<h1>CASIO</h1>
<h3>Calas og Sinselyo</h31>
<br/>
</center>
<center>
<form Name="calc">
	<table>
		<tr>
			<td colspan=4><input style="background-color:#F0FFFF" type="text" size=12 id="textboxes" Name="display"></td> //This is for the textbox of the calculator
		</tr>
	</table>
	<br>
	</center>
	<center>
	<table>	
		<tr>
		
			<td><input style="height:50px; background-color:#F08080" type=button value="C" OnClick="calc.display.value=''"></td>  //This one is for clearing anything on the textbox display of the calculator
		</tr>
		<tr> //below is the code for the numbers of the calculator
			<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
			<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
			<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
			<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
		</tr>
		<tr>
			<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
			<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
			<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
			<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
		</tr>
		<tr>
			<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
			<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
			<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
			<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
		</tr>
		<tr>
			<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
			<td><input type=button value="." OnClick="calc.display.value+='.'"></td>
			<td><input type=button value="=" id="equals" OnClick="calc.display.value=eval(calc.display.value)"></td>
			<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
		</tr>
	</table>
</form>
</center>
<p align="right">by: Raymart C. Lopez</p>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

您可以尝试这样的事情:

试着告诉我会发生什么:)

&#13;
&#13;
window.addEventListener('keypress', function(e) {
  var keycode = e.which || e.keyCode;
  var valueEntered = String.fromCharCode(keycode);
  console.log(valueEntered);
});
&#13;
&#13;
&#13;

这将为您提供按下的键的值。您将需要执行switch / if语句来确定按下了哪个键。您还可以检查以确保该值是isNan();的数字。

答案 1 :(得分:1)

您似乎只需要input的{​​{1}}上的事件监听器。

=

我使用过jQuery。您还可以使用无jQuery版本:

$(function () {
  $("#textboxes, body").keydown(function (event) {
    if (event.which == 187) {
      $("#equals").trigger("click");
      return false;
    }
  });
});

小提琴:http://output.jsbin.com/pegigulibe