我一直在努力學習網路開發的基礎知識(HTML、CSS 和 JS),所以我一直在嘗試製作一個可用的蘋果計算器。一切都工作正常,直到我注意到一個小錯誤。
一開始,操作按鈕上的懸停效果很好,當我懸停時顏色變得更亮。當我按下按鈕時,按鈕會變得更加明亮並保持這種狀態,直到使用者輸入另一個數字(或「等於」按鈕)來與前一個數字進行操作。之後,操作按鈕將變為正常顏色。在那之前,一切都很好,但我注意到,在用戶按下按鈕並進行操作後,懸停效果不再起作用,並且當滑鼠懸停在其上時,它不再改變其顏色。 < /p>
這是我寫的所有程式碼:
//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); }
我期望在使用按鈕後,它仍然會保留懸停效果。每個操作按鈕使用一次後,不再套用懸停效果。此問題僅出現在操作按鈕上,數字或清除按鈕也不會出現這種情況
P粉8086974712024-04-02 09:27:49
懸停效果不再起作用,因為
function resetearBoton(palabra) { botonOperacion = document.getElementById(palabra); botonOperacion.style["filter"] = "none"; }
當這個函數運行時,它會為按鈕設定一個內聯樣式(filter:none;),並且因為內聯樣式比外部樣式表具有更高的優先權(botonesCalculadora.css ),所以它覆蓋你的
button:hover { cursor: pointer; filter: brightness(117%); }
在buttonCalculator.css中
1 使用類別
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";
botonOperacion.classList.remove("active");
}
function alterarBotonOperacion(palabra) {
if (palabra == "igual") {
return;
}
operacion = palabra;
botonOperacion = document.getElementById(palabra);
botonOperacion.classList.add("active");
// 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);
}
body {
background: black;
}
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,
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%;
}
2 在重設功能中從按鈕中刪除樣式屬性而不是設定(filter:none;
)
function resetearBoton(palabra) { botonOperacion = document.getElementById(palabra); function resetearBoton(palabra) { botonOperacion = document.getElementById(palabra); // botonOperacion.style["filter"] = "none"; /** remove this **/ botonOperacion.removeAttribute("style"); /** add this **/ } }
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"; /** remove this **/
botonOperacion.removeAttribute("style"); /** add this **/
}
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);
}
body {
background: black;
}
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%;
}