每 X 秒更改一次文本顏色 JavaScript

Question

javascript 的新功能。 我正在寫這個網站，我想在鼠標懸停在徽標上時定期隨機更改徽標的顏色。 所以它是 color1，然后等待 x 毫秒，然后是 color2，依此類推，直到鼠標不再懸停在它上面。 到目前為止，我只能將徽標更改為一種隨機選擇的顏色。 此外，我認為我使用“mouseover”和“mouseout”的方式似乎很混亂且效率低下，有沒有更好的方法來使用它們？

我的代碼（我只留下了必需品）

!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <title>My Webpage</title>
        <script>
            document.addEventListener('DOMContentLoaded', function listen() {
                var logo = document.querySelector('.logo-btn');
                logo.addEventListener("mouseover", event => setTimeout(changeColor(event), 500));
                logo.addEventListener("mouseout", event => resetColor(event));
            })

            function changeColor (event) {
                var colors = ["#ff3300", "#fbfb32", "#99ff33", "orange", "magenta", "#3399ff"]
                var color = colors[Math.floor(Math.random() * colors.length)];
                var logo = event.target;

                logo.style.color = color;
            }
            function resetColor (event) {
                var logo = event.target;
                logo.style.color = "black";
            }
        </script>
    </head>
    <body>
        <header>
            <div class="header-logo">
                <a href="x">
                    <button class="logo-btn">Logo</button>
                </a>
            </div>
    </body>
</html>

header {
    background-color: #fff;
    height: 80px;
    position: relative;
}

.header-logo {
    font-size: 50px;
    position: absolute;
    bottom: -15px;
    left: 40px;
}

.logo-btn {
    background-color: transparent;
    border: none;
    text-align: bottom;
}
```
Thank you very much!

Answer 1

你做得非常正確。 您所需要的只是使用setInterval而不是setTimeout 。 此外，您需要將間隔存儲在變量中並在mouseout時將其清除，以便文本不會不斷改變顏色。

 let interval; document.addEventListener('DOMContentLoaded', function listen() { var logo = document.querySelector('.logo-btn'); logo.addEventListener("mouseover", event => {interval = setInterval(()=>changeColor(event), 500)}); logo.addEventListener("mouseout", event => resetColor(event)); }) function changeColor(event) { var colors = ["#ff3300", "#fbfb32", "#99ff33", "orange", "magenta", "#3399ff"] var color = colors[Math.floor(Math.random() * colors.length)]; var logo = event.target; logo.style.color = color; } function resetColor(event) { var logo = event.target; logo.style.color = "black"; clearInterval(interval); }

 header { background-color: #fff; height: 80px; position: relative; }.header-logo { font-size: 50px; position: absolute; bottom: -15px; left: 40px; }.logo-btn { background-color: transparent; border: none; text-align: bottom; }

 <:DOCTYPE html> <html lang="en"> <head> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <link href="styles.css" rel="stylesheet"> <title>My Webpage</title> </head> <body> <header> <div class="header-logo"> <a href="x"> <button class="logo-btn">Logo</button> </a> </div> </header> </body> </html>

Answer 2

應該是這樣的……

let colors = [1,2,3],
element = document.qureySelector('whatever-your-logo'),
colorIndex = 0;
function changeColor(){
    //set color
    element.style.color = colors[colorIndex];
    //change to next color
    colorIndex++;
   // if it's last color then back to first colorIndex
   if(colorIndex >= colors.length-1) colorIndex = 0;
}


//Interval
let priod = 1000; //in ms
let interval = setInterval(changeColor, priod);


//done...

Answer 3

遞歸 function 可以解決您的問題。

鼠標懸停時將 mouseOver 變量設置為 1，鼠標移出時設置為 0。 您還可以在 mouseover 上調用 setColor 並使用 mouseOver 標志檢查鼠標是否結束。

現在您調用 setColor 來設置每次基於所選變量調用的新顏色

var logo = document.querySelector('.logo-btn');

logo.addEventListener("mouseover", event => {setColor(event); mouseOver = 1});
logo.addEventListener("mouseout", event => resetColor(event));

var colors = ["#ff3300", "#fbfb32", "#99ff33", "orange", "magenta", "#3399ff"],
    selected = 0,
    mouseOver = 0

function setColor(e){
    e.target.style.backgroundColor = colors[selected]

    if(mouseOver){
        setTimeout(function(){
            if(colors.length > selected + 1){
                selected = 0
            }
            else{
                selected ++
            }
            setColor(e)           
        }, 500)
    }
}

function resetColor(event){
    selected = 0
    mouseOver = 0
    e.target.style.backgroundColor = colors[selected]
}

每 X 秒更改一次文本顏色 JavaScript

問題描述

3 個解決方案

解決方案1
2 已采納 2022-08-22 12:38:06

解決方案2
0 2022-08-22 12:35:10

解決方案3
0 2022-08-22 12:48:12

每 X 秒更改一次文本顏色 JavaScript

問題描述

3 個解決方案

解決方案1 2 已采納 2022-08-22 12:38:06

解決方案2 0 2022-08-22 12:35:10

解決方案3 0 2022-08-22 12:48:12

解決方案1
2 已采納 2022-08-22 12:38:06

解決方案2
0 2022-08-22 12:35:10

解決方案3
0 2022-08-22 12:48:12