我在HTML、CSS和JS方面遇到了意想不到的行为.我正在构建一个界面，它在每个输入中接收一个数字，但"pisca"类的神奇之处在于每个输入接收一个元素，并将其传递给下一个等待用户点击，它只传递一次，这意味着我可以在第一个输入中输入一个数字，在第二个输入中输入几个数字，而其他输入变得不可访问.我相信如果我把代码放在这里，它会太长太复杂，所以我决定将它部署在CodeBen上，在那里你可以看到源代码并更好地理解我的问题:https://codepen.io/pen?template=ZEZZGYV
(在JS中)我试图通过在函数开头声明"pisca"变量来改变逻辑来解决它，但没有起作用.
function urnaEletronica() {
this.contador = document.querySelector(".contador")
this.digito = document.querySelector(".digitos-tela")
this.pisca = document.querySelector(".pisca")
this.inicia = () => {
this.capturaCliques();
this.atualizaTimer();
};
let minutos = 99;
let segundos = 0;
let timerInterval;
this.atualizaTimer = () => {
timerInterval = setInterval(() => {
if (segundos === 0) {
segundos = 59;
minutos--;
}
if (minutos === 0 && segundos === 0) {
this.contador.innerHTML = `${minutos = 0}:${segundos.toString().padStart(2, "0")}`
clearInterval(timerInterval);
console.log("Tempo esgotado!");
return window.location.href = "resultados.html";
}
this.contador.innerHTML = `${minutos}:${segundos.toString().padStart(2, "0")}`
segundos--;
}, 1000);
}
this.capturaCliques = () => {
document.addEventListener("click", event => {
const el = event.target;
if(el.classList.contains("numeros")) this.adicionaTela(el)
});
};
this.adicionaTela = el => {
/*let somNumeros = new Audio();
somNumeros.src = "audios/numeros.mp3";
somNumeros.play();*/
this.pisca.innerText += el.innerText;
this.pisca.classList.remove("pisca");
this.pisca.nextElementSibling.classList.add("pisca");
this.pisca = document.querySelector(".pisca")
}
}
urna = new urnaEletronica()
urna.inicia()@keyframes pisca {
0% {opacity: 0.2;}
50% {opacity: 1;}
100% {opacity: 0.2;}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 10px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
background: #787b78;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.contador{
position: absolute;
margin-top: -430px;
font-size: 40px;
color: #eee;
}
.urna {
border-radius: 5px;
background: rgb(196, 196, 196);
height: 70vh;
max-height: 100%;
max-width: 100%;
width: 90vw;
display: flex;
justify-content: space-between;
}
.tela-urna {
background: white;
border-color: #eee;
width: 50%;
height: 90%;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.digitos-urna {
background-color: #4f514f;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1.5rem;
margin: 20px auto;
}
.digitos-urna>div {
font-size: 20px;
}
.digitos-urna>div {
font-size: 20px;
border-radius: 5px;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.digitos-urna>div:hover{
background: rgb(62, 62, 62);
transition: all 0.25s;
}
.digitos-tela{
width: 70px;
height: 120px;
border: 2px solid #555;
font-size: 20px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.pisca{
animation-name: pisca;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.branco{
background-color: #FFF;
color: #000;
font-size: 13px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Urna Eletrônica</title>
<link rel="stylesheet" href="/css/index.css">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/apple-touch-icon-96x96.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-icon-192x192.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="contador" style="display: none;">5:00</div>
<div class="urna">
<div class="tela-urna">
<div class="cargo"></div>
<div class="digitos-tela pisca"></div>
<div class="digitos-tela"></div>
<div class="digitos-tela"></div>
<div class="digitos-tela"></div>
<div class="digitos-tela"></div>
</div>
<div class="digitos-urna">
<div class="numeros">1</div>
<div class="numeros">2</div>
<div class="numeros">3</div>
<div class="numeros">4</div>
<div class="numeros">5</div>
<div class="numeros">6</div>
<div class="numeros">7</div>
<div class="numeros">8</div>
<div class="numeros">9</div>
<div class="zero">
<div>0</div>
</div>
<div class="botoes-especiais">
<div class="branco">Branco</div>
<div class="corrige">Corrige</div>
<div class="confirma">Confirma</div>
</div>
</div>
</div>
<script src="/js/index.js"></script>
</body>
</html>