Question

我知道眨眼不是件好事。然而...

我有一个很长的复杂HTML表单，其中包含许多必填字段。除了突出显示空文本框之外，我还想通过闪烁问题文本三秒钟来引起他们的注意。

我可以找到的所有javascript / css方法似乎都会在有多个这样的项目闪烁时被忽略，或者是为了让项目一直闪烁而设计的。

有关如何实现这一目标的任何建议吗？

What is the replacement for a blinking text in a web page?的方法似乎有点矫枉过正。

感谢

德里克

我已经尝试了这个（在三秒钟内闪烁每个指定范围）但它只适用于它所要求的第一个项目：

function blinkOn(span){
    span.counter=0;
    span.defColor=span.style.color;
    span.alertTimerId =setInterval("blinkOnce('"+span.id+"')", 400 );
}

function blinkOnce(spanID){
    var span=document.getElementById(spanID)
    span.counter++;
    if(span.style.color==span.defColor){
        span.style.color='transparent'}
     else{
        span.style.color=span.defColor;
     }
    if(span.counter>8){
        blinkOff(span);
    }   
}

function blinkOff(span){
   clearInterval(span.alertTimerId);    
   span.style.color=span.defColor;
}

Answer 1

我个人使用jQuery来做这件事：

$('#element_id')
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300);

我知道这很不雅，但它能完成这项工作。 jQuery UI确实有一些更简洁的效果。

我使用它的唯一地方是当用户将某些东西添加到购物篮而不重定向到购物篮页面时，只是为了确保他们知道它已被添加。

请参阅： http://api.jquery.com/fadeIn/，http://api.jquery.com/fadeOut/和http://jqueryui.com/docs/show/（特别是脉动）

Answer 2

我并不完全清楚你想要的行为，但听起来你可以使用Javascript计时器来解决问题（或采取某种行动）。您可以为要闪烁的每个元素创建唯一的计时器。您可以将它们闪烁一次或将它们设置为无限重复或极限重复。这是一个例子： http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

今天早上我花了一些时间来解决这个问题。如果你还没有让你的工作，我希望你能适应这一点。

<html>
  <head>
    <script type="text/javascript">
      var idArray = [];
      var defaultColor = '#000000';

      function makeItemsBlink(blinkTime) {
        blinkForTime('q1', blinkTime, '#ff0000');
        blinkForTime('q2', blinkTime, '#00ff00');
        blinkForTime('q3', blinkTime, '#0000ff');
      }

      function blinkForTime(id, blinkTime, blinkColor) {
        idArray[id] = setInterval('toggleColor("' + id + '", "' + blinkColor + '")', 400);
        setTimeout('stopBlinking("' + id + '")', blinkTime);
      }

      function stopBlinking(id) {
        clearInterval(idArray[id]);
        document.getElementById(id).style.color = defaultColor;
      }

      function toggleColor(id, blinkColor) {
        var e = document.getElementById(id);
        var currentColor = e.style.color;
        if (currentColor == defaultColor) {
          e.style.color = blinkColor;
        }
        else {
          e.style.color = defaultColor;
        }
      }
    </script>
  </head>
  <body onload="makeItemsBlink(3000);">
    <div id="q1">Test question 1</div>
    <div id="q2">Test question 2</div>
    <div id="q3">Test question 3</div>
  </body>
</html>

闪光文字三秒钟

2 个答案: