搜尋

首頁  >  問答  >  主體

按鈕啟動導致懸停效果故障

我一直在努力學習網路開發的基礎知識(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> &#177; </button> <!--Estos botones serán de broma-->
            <button class=grey> &#8274; </button> <!--Estos botones serán de broma-->
            <button class=orange id="division" href="#"
                onclick="seleccionarBoton('operacion', 'division'); contadorOperacion = 1;"> &divide; </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;"> &times; </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;"> &plus; </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;"> &minus; </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粉548512637P粉548512637231 天前516

全部回覆(1)我來回復

  • P粉808697471

    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%;
    }

    0

    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%;
    }

    0

    回覆
    0
  • 取消回覆