3

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

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

当有多个此类项目闪烁或旨在让项目一直闪烁时，我能找到的所有 javascript/css 方法似乎都失败了。

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

什么是网页中闪烁文本的替代方法？似乎有点矫枉过正。

谢谢

德里克

我试过这个（让每个指定的跨度闪烁超过三秒），但它只适用于它要求的第一个项目：

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;
}
4

2 回答 2

12

我个人使用 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/（特别是脉动）

于 2011-02-02T17:11:32.510 回答
4

我不太清楚您想要的行为，但听起来您可能可以使用 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>
于 2011-02-02T17:14:50.387 回答