如何在javascript中設置顏色轉換？

在任何人聲明這一點之前，是的，我知道你可以在CSS中過渡事物。但是，我想知道如何在JavaScript中轉換背景顏色。我正在處理這個函數，它將ex1的id背景變爲綠色，但setInterval函數只運行一次，這很奇怪。如何在javascript中設置顏色轉換？

CSS：

<style type="text/css"> 
div#ex1{color:white; background:black; width:300px; padding:0px 10px 10px; margin-bottom:10px;} 
div#ex1:hover{cursor:pointer;} 
div#ex1 h2{border-bottom:double 3px white; text-align:center; padding: 5px 0; margin: auto -10px;} 
div#ex1 p{text-indent:5px;} 
</style>

HTML

<div id="ex1"> 
    <h2>Transition Color</h2> 
    <h4>Text:</h4> 
    <p>Church-key seitan listicle locavore, mixtape biodiesel readymade crucifix health goth flexitarian direct trade mlkshk iPhone. Banjo tote bag readymade +1 skateboard deep v. Mixtape cred readymade gentrify. Banh mi keytar butcher, skateboard knausgaard </p> 
</div>

使用Javascript：

document.getElementById('ex1').addEventListener('mouseover', function(e){ 
var tar = this; 

var counter; 

var backG = window.getComputedStyle(tar,null).getPropertyValue('background-color'); 

console.log(backG); 

var re,gr,bl; 
gr = 0; 
bl = 0; 

function chColor(tar) 
{  gr =+31; 
     bl=+10; 
    if (gr <153 && bl <51) 
    { console.log('This is running'); 
    tar.style.backgroundColor = 'rgb(0,'+gr+','+bl+')'; 
    } 
    else 
    { 
    clearInterval(counter); 
    console.log(backG); 
    console.log('The change has ended'); 
    } 
} 

counter = setInterval(chColor(tar),100); 

}, false);

來源

2016-04-05 black_yurizan

你能更具體地說明你的問題是什麼嗎？你的問題是你無法弄清楚如何轉換顏色？或者你不能讓它運行多次？或者是其他東西？ –

的setInterval需要作爲其將在每個間隔調用的第一個參數的函數的參考。你有它的方式，你傳遞函數的返回值。試試這個：

setInterval(function() { 
    chColor(tar); 
},100);

來源

2016-04-05 18:18:49 mcgraphix

謝謝，它的工作。我很好奇你是什麼意思作爲返回值。因爲我沒有return關鍵字。這是我第一次發生在我嘗試調用setInterval函數時，所以我不知道有什麼東西只會讓它運行一次 –

每個函數都「返回」。如果你沒有指定返回的內容，那麼它是未定義的。在你的情況下，你正在調用你的函數（這是它運行一次的原因），然後傳遞它返回給setInterval的「undefined」。所以你在代碼中真正說的是「每100毫秒執行一次未定義」 – mcgraphix

這2行代碼需要加以糾正，因爲你要使用+=，而不是=+。否則，這些值永遠不會增加。

gr += 31; 
bl +=10;

然後看mcgraphix的帖子。您還必須這樣做，以便在文本被隱藏時讓動畫改變顏色。（我也想提起這個，但是他打敗了我:)

來源

2016-04-05 18:20:04 Clomp

是的，我最初做到了，但setInterval只運行一次。所以我想也許如果我改變附加標誌會做點什麼。 –

如何在javascript中設置顏色轉換？

回答

相關問題