Pengaktifan butang menyebabkan kesan hover tidak berfungsi
Saya telah cuba mempelajari asas pembangunan web (HTML, CSS dan JS), jadi saya telah cuba membuat kalkulator Apple yang berfungsi. Semuanya berfungsi dengan baik sehingga saya perasan pepijat kecil.
Pada mulanya, kesan hover pada butang aksi berfungsi dengan baik, warna menjadi lebih cerah semasa saya melayang. Apabila saya menekan butang, butang menjadi lebih cerah dan kekal seperti itu sehingga pengguna memasukkan nombor lain (atau butang "sama") untuk melakukan sesuatu dengan nombor sebelumnya. Selepas itu, butang tindakan akan bertukar kepada warna biasa. Sehingga itu, semuanya baik-baik saja, tetapi saya perhatikan bahawa selepas pengguna menekan butang dan mengambil tindakan, kesan hover tidak lagi berfungsi dan ia tidak lagi berubah warna apabila tetikus melayang di atasnya. < /p>
Ini semua kod yang saya tulis:
//HTML
<!DOCTYPE html>
<html>
<head>
<title>
Calulcadora
</title>
<link rel="stylesheet" href="botonesCalculadora.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body style="background-color: black;">
<div class="calculadora">
<div class="linea_botones">
<p class="barra-resultado" id="result">0</p>
</div>
<div class="linea_botones">
<button class=grey href="#" onclick="seleccionarBoton('especial', 'resetear');"> AC </button>
<button class=grey> ± </button> <!--Estos botones serán de broma-->
<button class=grey> ⁒ </button> <!--Estos botones serán de broma-->
<button class=orange id="division" href="#"
onclick="seleccionarBoton('operacion', 'division'); contadorOperacion = 1;"> ÷ </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '7');"> 7 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '8');"> 8 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '9');"> 9 </button>
<button class=orange id="multi" href="#"
onclick="seleccionarBoton('operacion', 'multi'); contadorOperacion = 1;"> × </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '4');"> 4 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '5');"> 5 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '6');"> 6 </button>
<button class=orange id="suma" href="#"
onclick="seleccionarBoton('operacion', 'suma'); contadorOperacion = 1;"> + </button>
</div>
<div class="linea_botones">
<button class=black href="#" onclick="seleccionarBoton('numero', '1');"> 1 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '2');"> 2 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '3');"> 3 </button>
<button class=orange id="resta" href="#"
onclick="seleccionarBoton('operacion', 'resta'); contadorOperacion = 1;"> − </button>
</div>
<div class="linea_botones">
<button class=blackZero href="#" onclick="seleccionarBoton('numero', '0');"> 0 </button>
<button class=black href="#" onclick="seleccionarBoton('numero', '.');"> . </button>
<button class=orange id="igual" href="#"
onclick="seleccionarBoton('operacion', 'igual'); contadorOperacion = 1;"> = </button>
</div>
</div>
<script type="text/javascript" src="calculadora.js"></script>
</body>
</html>
//CSS
button {
height: 64px;
width: 64px;
border-radius:32px;
font-size: 30px;
font-family: 'Open Sans', sans-serif;
border-style: none;
margin-top: 5px;
margin-left: 3px;
margin-bottom: 5px;
margin-right: 3px;
transition: filter 0.15s;
}
button:hover {
cursor: pointer;
filter: brightness(117%);
}
button:active {
filter: brightness(135%);
}
.orange {
background-color: orange;
color: white;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
/*font-weight: bold;*/
}
.black {
background-color: rgb(49,49,49);
color: white;
}
.blackZero{
background-color: rgb(49,49,49);
color: white;
width: 138px;
padding-right: 86px;
}
.grey {
background-color: rgb(159,159,159);
color: black;
}
.linea_botones {
margin-left: 25%;
margin-right: 25%;
margin-top: 0;
width: 50%;
text-align: center;
display: inline-block;
}
.barra-resultado {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
font-size: 64px;
width: 265px;
color: black;
text-align: right;
display: inline-block;
margin-bottom: 5px;
color: white;
}
.calculadora {
width: 80%;
display: block;
margin-left: 10%;
margin-right: 10%;
}
//JAVASCRIPT
let numeroOperar = null;
let numeroOperacion = null;
var operacion = null;
var operacionAnterior = null;
var flagOperacion = 0;
var digitosIngresados = 0;
let resultado = document.getElementById("result");
let resultadoOperacion = 0;
function seleccionarBoton(tipo, valor) {
switch (tipo) {
case 'numero': //Revisar casos de uso: "Poner dos veces punto decimal", "Oprimir dos veces una operacion"
if (digitosIngresados == 0 && valor == '0') {
resultado.innerHTML = '0';
numeroOperacion = 0;
break;
}
if (digitosIngresados == 0 && valor != '0') {
resultado.innerHTML = '';
resultado.innerHTML = valor;
numeroOperacion = parseFloat(valor);
digitosIngresados++;
break;
}
if (digitosIngresados > 0) {
resultado.innerHTML = resultado.innerHTML + valor;
numeroOperacion = (numeroOperacion * 10) + parseFloat(valor);
digitosIngresados++;
break;
}
break;
case 'operacion':
operacion = valor;
console.log("Contador: " + flagOperacion);
if (flagOperacion == 0) {
numeroOperar = numeroOperacion;
try {
resetearBoton(operacionAnterior);
} catch (error) {
//Vacío -> Que no haga nada
}
alterarBotonOperacion(valor);
operacionAnterior = operacion;
digitosIngresados = 0;
flagOperacion = 1;
break;
}
if (flagOperacion == 1) {
switch (operacionAnterior) {
case 'suma':
resultadoOperacion = sumarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'resta':
resultadoOperacion = restarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'multi':
resultadoOperacion = multiplicarDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'division':
resultadoOperacion = dividirDosNumeros(numeroOperar, numeroOperacion);
resetearBoton(operacionAnterior);
alterarBotonOperacion(valor);
resultado.innerHTML = resultadoOperacion;
numeroOperar = resultadoOperacion;
break;
case 'igual':
flagOperacion = 0;
break;
}
digitosIngresados = 0;
operacionAnterior = operacion;
}
break;
case 'especial':
if (valor == 'resetear') {
resetearCalculadora();
}
break;
};
}
function resetearCalculadora() {
digitosIngresados = 0;
flagOperacion = 0;
resultado.innerHTML = '0';
numeroOperacion = 0;
numeroOperar = 0;
if (operacion == null) {
operacion == 'suma';
}
resetearBoton(operacion);
operacion = null;
}
function alternativaResetearCalculadora() {
location.reload();
}
function resetearBoton(palabra) {
botonOperacion = document.getElementById(palabra);
botonOperacion.style["filter"] = "none";
}
function alterarBotonOperacion(palabra) {
if (palabra == 'igual') {
return;
}
operacion = palabra;
botonOperacion = document.getElementById(palabra);
botonOperacion.style["filter"] = "brightness(135%)";
}
function resetearDuranteOperacion() {
as;
}
function sumarDosNumeros(a, b) {
return parseFloat(a) + parseFloat(b);
}
function restarDosNumeros(a, b) {
return parseFloat(a) - parseFloat(b);
}
function multiplicarDosNumeros(a, b) {
return parseFloat(a) * parseFloat(b);
}
function dividirDosNumeros(a, b) {
return parseFloat(a) / parseFloat(b);
}
Saya menjangkakan bahawa selepas menggunakan butang, ia masih mengekalkan kesan hover. Selepas setiap butang tindakan digunakan sekali, kesan tuding tidak lagi digunakan. Isu ini hanya berlaku dengan butang tindakan, bukan dengan nombor atau butang jelas sama ada
