閃爍文字

我有這個功能閃爍的按鈕「AddMoney」文本： -閃爍文字

function blinker1(){ 
    document.getElementById("AddMoney").value="Add Money"; 
    setTimeout("document.getElementById('AddMoney').value='     '", 500); 
    xxxx = setTimeout("blinker1()",1500); 
        }

我停下來，並設置具有這種功能的文本： -

function cease1() { 
      clearTimeout(xxxx); 
      document.getElementById("AddMoney").value="Add Money"; 
         }

它的作品，但現在又一次沒有按鈕中的文字。任何人知道爲什麼以及如何解決。

來源

2017-02-14 old-ocker

試着把xxxx放在函數的外部 – Merigold

如果這就是你的意思，xxxx是一個全局變量。 –

何時完全失去按鈕文字 – Merigold

現在又一次在按鈕中沒有文字。有人知道爲什麼？

只要調用cease1()而setTimeout("document.getElementById('AddMoney').value=' '",500)仍然按照平均每三次發生的方式調度，就會發生這種情況。在這種情況下，blinker1()超時將被取消，並顯示內容，但不久後會再次隱藏。

...以及如何解決？

你必須取消兩個超時：

var timerA, timerB; 
function blinker() { 
    document.getElementById("AddMoney").value = "Add Money"; 
    timerA = setTimeout(function() { 
     document.getElementById('AddMoney').value = ""; 
    }, 500); 
    timerB = setTimeout(blinker1, 1500); 
} 
function cease1() { 
    clearTimeout(timerA); 
    clearTimeout(timerB); 
    document.getElementById("AddMoney").value = "Add Money"; 
}

另外，使用兩個函數相互調度彼此，以便只有一個計時器是活動的時間：

var timer; 
function blinkerA() { 
    document.getElementById("AddMoney").value = "Add Money"; 
    timer = setTimeout(blinkerB, 500); 
} 
function blinkerB() { 
    document.getElementById('AddMoney').value = ""; 
    timer = setTimeout(blinkerA, 1000); 
} 
function cease1() { 
    clearTimeout(timer); 
    document.getElementById("AddMoney").value = "Add Money"; 
}

來源

2017-02-14 04:32:03 Bergi

謝謝Bergi。使用你的第一個例子。現在每次都有作品。謝謝大家。 –

-1

https://jsfiddle.net/a6rj4agg/

好了，這是我用閃爍的文字方法。

setInterval(blink, 710); 

function blink() { 
    var elm = $("#button12"); 
    var mycolor = elm.css('color'); 
    mycolor == 'rgb(0, 0, 0)' ? mycolor='transparent' : mycolor='rgb(0, 0, 0)'; 
    $("#button12").animate({color: mycolor},300); 
}

您實際上在清除超時後禁用了按鈕。

來源

2017-02-14 03:12:29 FreedomPride

這個版本應該對你更好一些。我堅持了香草的Javascript，而在引入jQuery的：

Fiddle

var blink = window.setInterval(blinker1, 900) 

function blinker1() { 
    var addMoney = document.getElementById("addMoney"); 

    addMoney.innerHTML = " "; 
    setTimeout(function(){addMoney.innerHTML = "ADD MONEY"}, 300); 
} 

document.getElementById('stop').addEventListener('click', function(){ 
    clearInterval(blink); 
})

注意 - 這將是更好，更容易達到效果眨眼using pure CSS。

來源

2017-02-14 04:15:46 Mark

你應該使用'clearInterval'而不是'clearTimeout'，即使兩者都有效。 – Bergi

好的。更新！ – Mark

文字消失，因爲您只在xxxx上設置了clearTimeout，所以setTimeout("document.getElementById('AddMoney').value=' '", 500);的超時將始終執行。我認爲這是按鈕中沒有文字的原因。

我的辦法是設置一個計數器，讓說，文本需要眨眼10次（根據您的代碼將需要15秒。）每次顯示時，在櫃檯上的文本將遞減，直到達到0

示例代碼（https://jsfiddle.net/2trodftu/1/）

//counter 
    var blinkCounter = 10; 

    // blink method 
    function blink() { 
     document.getElementById("AddMoney").value="Add Money"; 

     if (blinkCounter > 0) { 
      setTimeout("document.getElementById('AddMoney').value='     '", 500); 
      setTimeout(blink,1500); 
     } 

     blinkCounter = blinkCounter - 1; 
    } 

    //initializer 
    blink();

希望這有助於。

來源

2017-02-14 05:40:31 hakany

回答

相關問題