时间戳

首页 > 解决方案 > 用 javascript 激活一个类

javascript - 用 javascript 激活一个类

问题描述

问题是该类只工作一次。

css

    .green-glow {
    animation-name: green-glow;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
}
@keyframes green-glow {
    0% {
        border: 4px solid rgba(67, 243, 97);
    box-shadow: 0 0 10px #31b43a;
    }
    50% {
        border: 4px solid rgba(21, 255, 0, 0.822);
    box-shadow: 0 0 10px #29f036;
    }
    100% {
        border: 4px solid rgba(13, 255, 45, 0.685);
    box-shadow: 0 0 10px #31b43a;
    }
}

Javascript

function win(userChoice, computerChoice) {
    const result =  document.getElementById('p_result');
    result.textContent = 'You Win!';
    userScore++;
    userScore_span.textContent = userScore;
    document.getElementById(userChoice).classList.add('green-glow')
}

我想激活课程：每次用户获胜时“绿光”。

谢谢你的帮助

标签： javascriptcss

解决方案

我无法完全重现您的案例，userChoice, computerChoice
但为您制作了一个样本，希望对您有所帮助

function winUser() {
  document.getElementById("user").classList.add("green-glow");
  setTimeout(() => {
    document.getElementById("user").classList.remove("green-glow");
  }, 1000); // animation time
}

function winPc() {
  document.getElementById("pc").classList.add("green-glow");
  setTimeout(() => {
    document.getElementById("pc").classList.remove("green-glow");
  }, 1000); // animation time
}
.green-glow {
    animation-name: green-glow;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
}
@keyframes green-glow {
    0% {
        border: 4px solid rgba(67, 243, 97);
    box-shadow: 0 0 10px #31b43a;
    }
    50% {
        border: 4px solid rgba(21, 255, 0, 0.822);
    box-shadow: 0 0 10px #29f036;
    }
    100% {
        border: 4px solid rgba(13, 255, 45, 0.685);
    box-shadow: 0 0 10px #31b43a;
    }
}
<div id="game">
  <div id="user">User</div>
  <div id="pc">PC</div>
</div>

<button onclick="winUser()">Win User</button>
<button onclick="winPc()">Win PC</button>

推荐阅读