简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Pengaktifan butang menyebabkan kesan hover tidak berfungsi
P粉548512637
P粉548512637 2024-04-01 21:51:26
0
1
452

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> &#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);
}

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

P粉548512637
P粉548512637

membalas semua(1)
P粉808697471
P粉8086974712024-04-02 09:27:49 Tingkat 1

Kesan hover tidak lagi berfungsi kerana 

function resetearBoton(palabra) {
    botonOperacion = document.getElementById(palabra);
    botonOperacion.style["filter"] = "none";
}

Apabila fungsi ini berjalan, ia menetapkan gaya sebaris untuk butang (penapis:tiada;), dan kerana gaya sebaris mempunyai keutamaan yang lebih tinggi daripada helaian gaya luaran (botonesCalculadora.css), ia mengatasi milik anda 

button:hover {
    cursor: pointer;
    filter: brightness(117%);
}

Dalam butangKalkulator.css

Terdapat dua cara untuk menyelesaikan masalah ini

1 kelas penggunaan

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 Alih keluar atribut gaya daripada butang dan bukannya tetapkan dalam fungsi set semula (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
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！