按钮中的闪烁文本

Posted 2023-03-06

【中文标题】按钮中的闪烁文本

【英文标题】：Blinking text in a button

【发布时间】：2017-07-02 05:04:07

【问题描述】：

我有这个功能可以让按钮“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";
                      

它可以工作，但有时按钮中没有文字。 任何人都知道为什么以及如何解决。

【问题讨论】：

尽量把xxxx放在函数外面

xxxx 是一个全局变量，如果这就是你的意思的话。

你什么时候完全丢失了按钮文本

按钮文本闪烁，当我调用停止1时，闪烁停止并且文本出现在按钮中。按钮中时不时地没有文字。停止 1 调用后的警报显示文本始终已设置，但有时它不会显示在按钮中。

我不明白时不时的意思。你确定文本没有被剪裁

【参考方案1】：

按钮中有时没有文字。有人知道为什么吗？

每当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";

【参考方案2】：

这个版本应该更适合你。我坚持使用 vanilla 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。

【讨论】：

您应该使用clearInterval 而不是clearTimeout，即使两者都有效。

好收获。更新了！

【参考方案3】：

文本消失是因为您只在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();

希望这会有所帮助。