有人可以帮我怎么做吗?这是我的计算器而不是使用鼠标我想使用键盘功能。我该怎么做?下面是我的计算器的完整代码。
<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>
答案 0 :(得分:1)
您可以尝试这样的事情:
试着告诉我会发生什么:)
window.addEventListener('keypress', function(e) {
var keycode = e.which || e.keyCode;
var valueEntered = String.fromCharCode(keycode);
console.log(valueEntered);
});
&#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;
}
});
});