All geek questions in one place

Flash text for three seconds

I know that blinking is not very good. However...

I have a long complex HTML form with a number of required fields. In addition to highlighting empty text fields, I want to draw attention to them by flashing the question text, possibly in three seconds.

All javascript / css methods that I can find seem to drop when more than one such element is blinking or they are designed to keep the element blinking all the time.

Any suggestions to achieve this?

Method What replaces blinking text on a web page? seems redundant.

thank

Derek

I tried this (to blink each highlighted interval for a little over three seconds), but it only works with the first element that it called:

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;
}
+3
source
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>
+4

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/ ( , )

+10

Source: https://habr.com/ru/post/1789553/

More articles:


All Articles