向 JS 计算器添加键盘支持时出现问题

我想为我的计算器添加键盘支持。当我用键盘按下操作(即 +,-,* 或/(时，js 将其视为数字，而不是操作。

例如，当我通过单击计算"10+11"时，结果将得到"21"。当我通过键盘输入时做同样的事情时，我会得到"10"。

为什么会这样？有可能改变它吗？

<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="main">
<div id="output">
<input id="display" value="0">
</div>
<button class="clear" id="ce">CE</button>
<button class="clear" id="c">C</button>
<button class="operation" id="slash">/</button>
<button class="number" id="seven">7</button>
<button class="number" id="eight">8</button>
<button class="number" id="nine">9</button>
<button class="operation" id="star">*</button>
<button class="number" id="four">4</button>
<button class="number" id="five">5</button>
<button class="number" id="six">6</button>
<button class="operation" id="minus">-</button>
<button class="number" id="one">1</button>
<button class="number" id="two">2</button>
<button class="number" id="three">3</button>
<button class="operation" id="plus">+</button>
<button class="number" id="zero">0</button>
<button class="decimal" id="dot">.</button>
<button class="operation" id="equal">=</button>
</div>

<script>
let numberBtn=document.querySelectorAll(".number"),
operationBtn=document.querySelectorAll(".operation"),
clearBtn=document.querySelectorAll(".clear"),
decimalBtn=document.querySelector(".decimal"),
currentValue=0,
isNewValue= false,
currentOperation=null,
phrase="ошибка";
display=document.getElementById('display');
for (let i=0; i<operationBtn.length; i++) {
operations=operationBtn[i];
operations.addEventListener ('click', function (e) {
operate (e.target.textContent);
});
}
for (let i=0; i<operationBtn.length; i++) {
op=operationBtn[i];
op.addEventListener ('keypress', function (e) {
operate (e.key);
});
}
for (let i=0; i<numberBtn.length; i++) {
numbers=numberBtn[i];

numbers.addEventListener ('click', function (e) {
numberPress (e.target.textContent);

});
}
for (let i=0; i<numberBtn.length; i++) {
numbers=numberBtn[i];
numbers.addEventListener ('keypress', function (e) {
numberPress (e.key)
});
}
for (let i=0; i<clearBtn.length; i++) {
clears=clearBtn[i];
clears.addEventListener ('click', function (e) {
console.log (e.srcElement.id);
clear(e.srcElement.id);
});
}
function numberPress(numbers) {
if (isNewValue) {
display.value=numbers;
isNewValue=false;
console.log ('1');
} else {
if (display.value==0 && display.value!=='0.') {
display.value=numbers;
console.log ('2');
} else {
display.value+=numbers;
console.log ('3');
}
}
}
function operate(op) {
localOperationMemory=display.value;
if (isNewValue && currentOperation!=="=") {
currentValue=display.value;
console.log ('4');
} else {
isNewValue=true;
if (currentOperation=="+") {
currentValue+=parseFloat (localOperationMemory);
console.log ('5');
} else if (currentOperation=="-") {
currentValue-=parseFloat(localOperationMemory);
console.log ('6');
} else if (currentOperation=="*") {
currentValue*=parseFloat (localOperationMemory);
console.log ('7');
} else if (currentOperation=="/") {
currentValue/=parseFloat (localOperationMemory);
console.log ('8');
} else {
currentValue=parseFloat (localOperationMemory);
console.log ('9');
}
display.value=(Math.round(currentValue*100)/100);
currentOperation=op;
divideZero ()
}
}
</script>
</body>
</html>

试一试。它没有任何删除键或箭头键的功能，但它可能会帮助您前进更多。

<!DOCTYPE html>
<html>
<head>
</head>
<script>
var values
var dp
function checkCalcKey(key) {
switch (key) {
case '.':
document.getElementById('dot').click();
break;
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
case '+':
case '-':
case '/':
case '*':
case '=':
document.getElementById(key).click();
break;
}
return false;
// TODO handle any of 'ArrowLeft', 'ArrowRight', 'Delete','Backspace'. I'll leave this as an exercise for you to complete!
}
function hardReset() {
values = [];
opcode = null;
clear = true;
reset();
}

function reset() {
newNumber = false;
if (opcode === null) {
clearDisplay()
}    
}

function clearDisplay() {
dp = 0;
nc = 0;
document.getElementById('display').value = '';
}

function getValue() {
var value;
var s = '' + document.getElementById('display').value;
if (s === '') {
value = 0;
} else if (s.indexOf('.') === -1) {
value = Number(s);
} else {
value = parseFloat(s);
}
return value;
}

function performMaths() {
m = values.pop();
v = values.pop();
switch (opcode) {
case '+':
v += m;
break;
case '-':
v -= m;
break;
case '*':
v *= m;
break;
case '/':
if ( m=== 0) {
v = NaN;
} else {
v /= m;
}
break;
}
values = [v,m];
document.getElementById('display').value = v;
}

function init() {
clear = true;
hardReset();
document.querySelectorAll(".number").forEach((b) => {
b.addEventListener('click', (e) => 
{
newNumber = true;
if (clear) {
clearDisplay();
clear = false;
}
nc++;
display=document.getElementById('display');
if (dp === 0) {
var value = (10 * Number(display.value)) + Number(e.target.textContent);
display.value = value;
} else {
var f = Number(e.target.textContent) / Math.pow(10,dp);
var value = parseFloat(display.value);
var value = f + value;
var sv = '' + value
sv = sv.substring(0,nc);
display.value = sv;
dp++;
}
});
});

document.getElementById('dot').addEventListener('click', () => {
newNumber = true;
if (dp === 0) {
dp++;
nc++;
}
});

document.getElementById('c').addEventListener('click', () => {
hardReset();
});

document.getElementById('ce').addEventListener('click', () => {
reset();
});

document.querySelectorAll(".operator").forEach((b) => {
b.addEventListener('click', (e) => 
{
clear = true;
if (e.target.textContent != opcode) {
opcode = e.target.textContent;
}
if (document.getElementById('display').value != '') {
if (values.length === 2) {
values.shift();
}
values.unshift(getValue());
}
newNumber = false;
});
});

document.getElementById('=').addEventListener('click', () => {
if (values.length === 2) {
if (newNumber) {
values.pop();
values.push(getValue());
}
} else {
values.push(getValue());
}
performMaths();
newNumber = false;
});
}

</script>
<body onload="init()">
<div class="main">
<div id="output">
<input id="display" value="" onkeydown="return checkCalcKey(event.key)">
</div>
<button id="ce">CE</button>
<button id="c">C</button>
<button id="0" class="number">0</button>
<button id="1" class="number">1</button>
<button id="2" class="number">2</button>
<button id="3" class="number">3</button>
<button id="4" class="number">4</button>
<button id="5" class="number">5</button>
<button id="6" class="number">6</button>
<button id="7" class="number">7</button>
<button id="8" class="number">8</button>
<button id="9" class="number">9</button>
<button id="/" class="operator">/</button>
<button id="*" class="operator">*</button>
<button id="-" class="operator">-</button>
<button id="+" class="operator">+</button>
<button id="=">=</button>
<button id="dot">.</button>
</div>
</body>
</html>

代码说明：

getValue例程负责修复大部分工作，并回答原始问题中的要点：

如果变量被解释为字符串类型，则可能会弄乱计算。因此，您可以将您不知道类型的变量转换为字符串将空字符串与变量本身组合在一起。
有代码可以检查小数点是否存在，然后使用parseFloat或Number来转换变量的类型(parseInt是一个更详细的替代方法，需要 10 的基数 - 对于以 10 为基数的数字(。
其他几个关键变量是：
- DP(小数点(。它代表超过小数点的位数，因此您在后面添加的任何数字都除以 10^dp(因此 dp 之后的 1 位是 n * 1/10th，2 位是n* 1/100th 等(。
- NC(字符数(。有时你会得到奇怪的舍入误差，所以像 1.111 这样的东西突然变成了 1.111000000001 或类似的东西，所以 nc 用于计算输入的数字和小数位，并根据nc获取左侧字符数。

还有一些时髦的东西正在发生，模仿一个普通的计算器。这样当计算继续进行时，你可以做一些类似 enter 的操作：

5 * = 给 25..
再次按 =，它会给你 125。

因此，您输入的最后一个数字就像内存中的"粘性"常量。每当输入新值时，它就会成为新的"粘性"值。所以：

3 * 4 = (产生 12(，
= 然后产生 48 等。

所以： - 值数组用于存储粘性值和总计：

它在performMaths((中被重新评估
在运算符和=事件处理程序中进行了调整。
- 布尔值newValue在按下数字时设置为true，在按下操作(如+、-、/、*或=(时设置为false。

checkCalcKey((是一个事件处理程序，用于在输入HTML 控件上向下键。通过返回false，它可以阻止您键入的字符进入构建输入。相反，它遵循相应按钮的单击处理程序，并且输入控件值属性中的任何字符条目都改为通过该处理程序执行。(更多信息在这里(。

相关内容

最新更新

热门标签：