时间戳

首页 > 解决方案 > 我的边框切换颜色之间有延迟。想知道如何解决这个问题，因为它看起来很奇怪

javascript - 我的边框切换颜色之间有延迟。想知道如何解决这个问题，因为它看起来很奇怪

问题描述

完整代码： https ://github.com/XxTyaftioNxX/RockPaperScissors jsfiddle： https ://jsfiddle.net/45y3sdth/

这里记分板的边界比选项按钮的边界早一秒 userChoice_div = document.getElementById(userChoice); scoreBoard_Id = document.getElementById('score');

js

if(resultType === "tie"){
        //changing the color of the option border       
        userChoice_div.classList.add('gray-glow');
        setTimeout(() => userChoice_div.classList.remove('gray-glow'), 300);
        //chnaging the color of the scoreboard border
        scoreBoard_Id.classList.add('gray-glow');
        setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 300); 
        //increasing the score     
        userScore = userScore + 1;
        userScore_span.innerHTML = userScore;
        computerScore = computerScore + 1;
        computerScore_span.innerHTML = computerScore;

css

.score-board{
    margin: 20px auto;
    border: 4px solid white;
    border-radius: 5px;
    text-align: center;
    font-family: Times New Roman;
    width: 200px;
    color: white;
    font-size: 30px;
    padding: 15px 20px;
    position: relative;
}

.gray-glow{
    border: 4px solid gray;
    box-shadow: 0 0 10px rgb(61, 68, 70);
}

html

<div class="score-board" id="score">
        <div id="user-label" class="badge">user</div>
        <div id ="comp-label"class="badge">comp</div>
        <span id="user-score">0</span>:<span id="computer-score">0</span>
    </div>
    <div class="result">
        <p>LETS GET THAT BREAD</p>
    </div>
    <div class="choices">
        <div class="choice" id="rock">
            <img src="assets/rock.png" alt="">
        </div>
        <div class="choice" id="paper">
            <img src="assets/paper.png" alt="">
        </div>
        <div class="choice" id="scissors">
            <img src="assets/scissors.png" alt="">
        </div>
    </div> 
    </div> ```

标签： javascripthtmlcss

解决方案

检查您的代码 setTimeout 函数中是否设置了 300，这是导致边框更改延迟设置为 0 或删除设置超时功能的原因。

setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 0);

推荐阅读