小贝子编程

如何组合键盘和点击组合



let operator = "";
let currentValue = "";
let previousValue = "";
document.addEventListener("DOMContentLoaded", () => {
let clear = document.querySelector("#clear-btn");
let equal = document.querySelector(".equal");
let decimal = document.querySelector(".decimal");
let numbers = document.querySelectorAll(".number");
let operators = document.querySelectorAll(".operator");
let previousScreen = document.querySelector(".previous");
let currentScreen = document.querySelector(".current");
numbers.forEach((number) => {
number.addEventListener("click", (e) => {
handleNumber(e.target.textContent);
currentScreen.textContent = currentValue;
});
});
operators.forEach((op) => {
op.addEventListener("click", (e) => {
handleOperator(e.target.textContent);
previousScreen.textContent = previousValue + " " + operator;
currentScreen.textContent = currentValue;
});
});
clear.addEventListener("click", () => {
operator = "";
currentValue = "";
previousValue = "";
previousScreen.textContent = currentValue;
currentScreen.textContent = currentValue;
});
equal.addEventListener("click", () => {
if (currentValue != "" && previousValue != "") {
calculate();
previousScreen.textContent = "";
if (previousValue.length <= 5) {
currentScreen.textContent = previousValue;
} else {
currentScreen.textContent = previousValue.slice(0, 5) + "...";
}
}
});
decimal.addEventListener("click", () => {
addDecimal();
});
});
function handleNumber(num) {
if (currentValue.length <= 5) {
currentValue += num;
}
}
function handleOperator(op) {
operator = op;
previousValue = currentValue;
currentValue = "";
}
function calculate() {
previousValue = Number(previousValue);
currentValue = Number(currentValue);
if (operator === "+") {
previousValue += currentValue;
} else if (operator === "-") {
previousValue -= currentValue;
} else if (operator === "x") {
previousValue *= currentValue;
} else if (operator === "/") {
previousValue /= currentValue;
}
previousValue = roundNum(previousValue);
previousValue = previousValue.toString();
currentValue = previousValue.toString();
}
function roundNum(num) {
return Math.round(num * 1000) / 1000;
}
function addDecimal() {
if (!currentValue.includes(".")) {
currentValue += ".";
}
}
window.onkeydown = function(e) {
let x = e.key;
let choice;
switch (x) {
case "1":
choice = document.querySelector(".one");
choice.click();
break;
case "2":
choice = document.querySelector(".two");
choice.click();
break;
case "3":
choice = document.querySelector(".three");
choice.click();
break;
case "4":
choice = document.querySelector(".four");
choice.click();
break;
case "5":
choice = document.querySelector(".five");
choice.click();
break;
case "6":
choice = document.querySelector(".six");
choice.click();
break;
case "7":
choice = document.querySelector(".seven");
choice.click();
break;
case "8":
choice = document.querySelector(".eight");
choice.click();
break;
case "9":
choice = document.querySelector(".nine");
choice.click();
break;
case "0":
choice = document.querySelector(".zero");
choice.click();
break;
case "/":
choice = document.querySelector(".division");
choice.click();
break;
case "*":
choice = document.querySelector(".multiply");
choice.click();
break;
case "-":
choice = document.querySelector(".minus");
choice.click();
break;
case "+":
choice = document.querySelector(".plus");
choice.click();
break;
case ".":
choice = document.querySelector(".decimal");
choice.click();
break;
case "Enter":
choice = document.querySelector(".equal");
choice.click();
break;
case "Backspace":
choice = document.querySelector("#clear-btn");
choice.click();
break;
}
};
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.btn {
height: 75px;
width: 75px;
margin: 15px;
font-size: 40px;
}
.number {
border: 1px solid yellowgreen;
border-radius: 10px;
}
.number:hover {
background-color: palegreen;
}
.operator {
border: 1px solid steelblue;
border-radius: 10px;
}
.operator:hover {
background-color: paleturquoise;
}
.decimal {
border: 1px solid gold;
border-radius: 10px;
}
.decimal:hover {
background-color: palegoldenrod;
}
.equal {
border: 1px solid pink;
border-radius: 10px;
}
.equal:hover {
background-color: plum;
}
#clear-btn {
border: 1px solid violet;
border-radius: 10px;
}
#clear-btn:hover {
background-color: palevioletred;
}
.first-row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
#screen {
width: 300px;
border: 1px solid salmon;
height: 75px;
margin: 15px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.previous {
font-size: 20px;
}
.current {
font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Calculator</h1>
<div class="calculator">
<div class="first-row">
<div id="screen">
<div class="previous"></div>
<div class="current"></div>
</div>
<button id="clear-btn" class="btn">C</button>
</div>
<div class="other-rows">
<button class="btn number seven">7</button>
<button class="btn number eight">8</button>
<button class="btn number nine">9</button>
<button class="btn operator division">/</button>
</div>
<div class="other-rows">
<button class="btn number four">4</button>
<button class="btn number five">5</button>
<button class="btn number six">6</button>
<button class="btn operator multiply">x</button>
</div>
<div class="other-rows">
<button class="btn number one">1</button>
<button class="btn number two">2</button>
<button class="btn number three">3</button>
<button class="btn operator minus">-</button>
</div>
<div class="other-rows">
<button class="btn decimal">.</button>
<button class="btn number zero">0</button>
<button class="btn equal">=</button>
<button class="btn operator plus">+</button>
</div>
</div>
</body>
</html>

我不确定我的代码是否是最佳实践，但当尝试同时实现点击和按键功能时，我的应用程序无法工作。例如，键入5*5，然后按Enter(答案显示(。然后继续单击C以清除并键入5*5，然后再次按Enter。这一次不会显示答案。我不确定错误是什么。有更好的方法来实现click和keydown函数吗？

您的通用方法很好。问题是Enter键的默认操作是单击活动按钮。由于您单击的最后一个按钮是C，因此Enter再次单击该按钮，这将在结果显示后清除结果。

在keydown监听器中调用e.preventDefault()以停止此操作。

let operator = "";
let currentValue = "";
let previousValue = "";
document.addEventListener("DOMContentLoaded", () => {
let clear = document.querySelector("#clear-btn");
let equal = document.querySelector(".equal");
let decimal = document.querySelector(".decimal");
let numbers = document.querySelectorAll(".number");
let operators = document.querySelectorAll(".operator");
let previousScreen = document.querySelector(".previous");
let currentScreen = document.querySelector(".current");
numbers.forEach((number) => {
number.addEventListener("click", (e) => {
handleNumber(e.target.textContent);
currentScreen.textContent = currentValue;
});
});
operators.forEach((op) => {
op.addEventListener("click", (e) => {
handleOperator(e.target.textContent);
previousScreen.textContent = previousValue + " " + operator;
currentScreen.textContent = currentValue;
});
});
clear.addEventListener("click", () => {
operator = "";
currentValue = "";
previousValue = "";
previousScreen.textContent = currentValue;
currentScreen.textContent = currentValue;
});
equal.addEventListener("click", () => {
if (currentValue != "" && previousValue != "") {
calculate();
previousScreen.textContent = "";
if (previousValue.length <= 5) {
currentScreen.textContent = previousValue;
} else {
currentScreen.textContent = previousValue.slice(0, 5) + "...";
}
}
});
decimal.addEventListener("click", () => {
addDecimal();
});
});
function handleNumber(num) {
if (currentValue.length <= 5) {
currentValue += num;
}
}
function handleOperator(op) {
operator = op;
previousValue = currentValue;
currentValue = "";
}
function calculate() {
previousValue = Number(previousValue);
currentValue = Number(currentValue);
if (operator === "+") {
previousValue += currentValue;
} else if (operator === "-") {
previousValue -= currentValue;
} else if (operator === "x") {
previousValue *= currentValue;
} else if (operator === "/") {
previousValue /= currentValue;
}
previousValue = roundNum(previousValue);
previousValue = previousValue.toString();
currentValue = previousValue.toString();
}
function roundNum(num) {
return Math.round(num * 1000) / 1000;
}
function addDecimal() {
if (!currentValue.includes(".")) {
currentValue += ".";
}
}
window.onkeydown = function(e) {
e.preventDefault();
let x = e.key;
let choice;
switch (x) {
case "1":
choice = document.querySelector(".one");
choice.click();
break;
case "2":
choice = document.querySelector(".two");
choice.click();
break;
case "3":
choice = document.querySelector(".three");
choice.click();
break;
case "4":
choice = document.querySelector(".four");
choice.click();
break;
case "5":
choice = document.querySelector(".five");
choice.click();
break;
case "6":
choice = document.querySelector(".six");
choice.click();
break;
case "7":
choice = document.querySelector(".seven");
choice.click();
break;
case "8":
choice = document.querySelector(".eight");
choice.click();
break;
case "9":
choice = document.querySelector(".nine");
choice.click();
break;
case "0":
choice = document.querySelector(".zero");
choice.click();
break;
case "/":
choice = document.querySelector(".division");
choice.click();
break;
case "*":
choice = document.querySelector(".multiply");
choice.click();
break;
case "-":
choice = document.querySelector(".minus");
choice.click();
break;
case "+":
choice = document.querySelector(".plus");
choice.click();
break;
case ".":
choice = document.querySelector(".decimal");
choice.click();
break;
case "Enter":
choice = document.querySelector(".equal");
choice.click();
break;
case "Backspace":
choice = document.querySelector("#clear-btn");
choice.click();
break;
}
};
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.btn {
height: 75px;
width: 75px;
margin: 15px;
font-size: 40px;
}
.number {
border: 1px solid yellowgreen;
border-radius: 10px;
}
.number:hover {
background-color: palegreen;
}
.operator {
border: 1px solid steelblue;
border-radius: 10px;
}
.operator:hover {
background-color: paleturquoise;
}
.decimal {
border: 1px solid gold;
border-radius: 10px;
}
.decimal:hover {
background-color: palegoldenrod;
}
.equal {
border: 1px solid pink;
border-radius: 10px;
}
.equal:hover {
background-color: plum;
}
#clear-btn {
border: 1px solid violet;
border-radius: 10px;
}
#clear-btn:hover {
background-color: palevioletred;
}
.first-row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
#screen {
width: 300px;
border: 1px solid salmon;
height: 75px;
margin: 15px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.previous {
font-size: 20px;
}
.current {
font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Calculator</h1>
<div class="calculator">
<div class="first-row">
<div id="screen">
<div class="previous"></div>
<div class="current"></div>
</div>
<button id="clear-btn" class="btn">C</button>
</div>
<div class="other-rows">
<button class="btn number seven">7</button>
<button class="btn number eight">8</button>
<button class="btn number nine">9</button>
<button class="btn operator division">/</button>
</div>
<div class="other-rows">
<button class="btn number four">4</button>
<button class="btn number five">5</button>
<button class="btn number six">6</button>
<button class="btn operator multiply">x</button>
</div>
<div class="other-rows">
<button class="btn number one">1</button>
<button class="btn number two">2</button>
<button class="btn number three">3</button>
<button class="btn operator minus">-</button>
</div>
<div class="other-rows">
<button class="btn decimal">.</button>
<button class="btn number zero">0</button>
<button class="btn equal">=</button>
<button class="btn operator plus">+</button>
</div>
</div>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium