прошить текст за три секунды - PullRequest
Новая
       2

прошить текст за три секунды

3 голосов
/ 02 февраля 2011

Я знаю, что мигать не очень хорошая вещь.Однако ...

У меня есть длинная сложная форма 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;
}

Ответы [ 2 ]

10 голосов
/ 02 февраля 2011

Я лично использую jQuery для таких вещей: 

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

Совершенно не элегантно, я знаю, но это делает работу. Пользовательский интерфейс jQuery имеет несколько более лаконичных эффектов.

Единственное место, где я его использую, - это когда пользователь добавляет что-то в корзину, не перенаправляя на страницу корзины, просто чтобы убедиться, что он знает, что это было добавлено.

См: http://api.jquery.com/fadeIn/, http://api.jquery.com/fadeOut/ и http://jqueryui.com/docs/show/ (в частности, пульсат)

4 голосов
/ 02 февраля 2011

Мне не совсем понятно, какое поведение вы хотите, но звучит так, как будто вы можете вспомнить вопрос (или предпринять какое-то действие), используя таймер 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...