![](/img/trans.png)
[英]Keyboard input for a 'clear all' function on a Javascript calculator
[英]Javascript: Add keyboard input to calculator
昨天開始了一個小項目來制作一個計算器。 我認為它可以正常工作,但我想更進一步並添加鍵盤輸入(就像您可以在出廠默認操作系統計算器上一樣)
我在這里找到了答案,但它是針對 C# 的。
所以:
如何在 JavaScript 中添加鍵盤輸入? 這將包括 0-9,所有運算符,“C”清除和“刪除”/“esc”刪除最后一個條目。
理想情況下,我希望我確實發生了 css 懸停效果(較暗的陰影)
當點擊鍵時。
你可以在這里查看開始: http : //codepen.io/apswak/pen/RapEqp
索引.html
<div id="calculator">
<div id="screen">
<div id="calc">0</div>
<div id="result">0</div>
</div>
<button class="value">1</button><button class="value">2</button><button class="value">3</button><button class="value">+</button><button class="value">4</button><button class="value">5</button><button class="value">6</button><button class="value">-</button><button class="value">7</button><button class="value">8</button><button class="value">9</button><button class="value">*</button><button class="value">.</button><button class="value">0</button><button class="CE"> ←</button><button class="value">/</button><button class="equals">=</button><button class="C">C</button>
</div>
腳本.js
$(document).ready(function() {
var string = "";
/* Calculator input string */
$(".value").click(function() {
string += $(this).text();
$("#calc").text(string);
});
/* Clear all */
$(".C").click(function() {
string = "";
$("#calc, #result").text("0");
});
/* Clear last entry */
$(".CE").click(function() {
string = string.slice(0, string.length - 1);
$("#calc").text(string);
});
/* Show result */
$(".equals").click(function() {
$("#result").text(eval(string));
});
});
這是 codePen 示例中帶有按鍵功能的示例:
http://codepen.io/anon/pen/WwjNao
document.onkeypress = function (e) {
keyPressed = String.fromCharCode(e.which);
if($("#calc").length > 0){
$("#calc").append(keyPressed);
}else{
$("#calc").text(keyPressed);
}
};
這是一個提示,我不會給你所有的代碼;)
我已經在你的密碼筆副本中用一些基本數字開始了你
您必須偵聽按鍵並將鍵 (event.which) 與其應觸發的事件相匹配。
$(document).keypress(function(event){
console.log(event.which);
//0
if(event.which == 48){
string += 0;
$("#calc").text(string);
}
});
http://codepen.io/anon/pen/LNyYJM
此外,如果您執行 0123+5,它會說它等於 88,因此您可能需要將其記為錯誤。
您可以使用 keypress https://api.jquery.com/keypress/並收聽正在按下的鍵。
鍵碼:https ://css-tricks.com/snippets/javascript/javascript-keycodes/
$( "#target" ).keypress(function( event ) {
if ( event.which == 48 ) {
// Return #0
}
if ( event.which == 49 ) {
// Return #1
}
// and so on...
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.