Стробоскоп Jquery div

#javascript #jquery

Вопрос:

Я хотел бы, чтобы div действовал как стробоскоп с помощью jquery. В основном меняйте цвет фона с черного на белый каждые 500 миллисекунд.

Как я могу это сделать?

 <div id="strobe"></div>

Спасибо!

1. Вы можете создать бесконечный цикл, создав функцию, затем задать цвет фона с помощью jquery или создать два класса и присвоить классу этот div. Затем используйте setTimeout из javascript, чтобы создать задержку в цикле и снова вызвать функцию. вы также можете это проверить jquery.offput.ca/timers

Ответ №1:

setInterval() Функция здесь твой друг.

Вам не нужно использовать jQuery, вы можете сделать это на чистом javascript — вот как вы бы это сделали:

 var elem = document.getElementById("strobe");
var strobeBackground = function() {
   (elem.style.backgroundColor == "white") ? elem.style.backgroundColor = "black" : elem.style.backgroundColor = "white";
}

setInterval(strobeBackground, 500);

Однако, если вы хотите сделать это в jQuery, вот оно:http://jsfiddle.net/Ru9xt/2

HTML-код будет выглядеть следующим образом:

  <div id="strobe" class="white">Hello</div>

CSS будет выглядеть следующим образом:

 .white {
    background-color: white;
}
.black {
    background-color: black;
}

И JS здесь:

 setInterval(function () {
        $("#strobe").toggleClass('black');
    }, 500);

1. вы можете ускорить процесс, кэшируя элемент, возвращаемый document.getElementById вместо того, чтобы выполнять два вызова для элемента каждый раз, когда вы меняете цвет. 1 за использование DOM 🙂

Ответ №2:

Вы можете использовать jQuery как для проверки цвета фона элемента, так и для установки интервала, с которым он мигает, с помощью $.css() метода, который получает или задает стиль элемента, и setInterval() метода, который настраивает повторяющийся вызов метода.

 function toggle(){
    var strobe = $('#strobe');
    if(strobe.css('background-color') == '#FFFFFF'){
        strobe.css('background-color', '#000000');
    }else{
        strobe.css('background-color', '#FFFFFF');
    }
}

setInterval(toggle, 500);

Ответ №3:

Вместо этого я использовал классы:

 /**
 * Initialise strobe using classes. By Emmanuel Mahuni - 2015
 * @param {string} sel selector
 * @param {int} i speed in milli-seconds
 * @param {string} c1 class 1
 * @param {string} c2 class 2
 * @returns {int} the interval id so that you can clear it later
 */
function initStrobeClass(sel, i, c1, c2) {
    return setInterval(strobeClass, i,sel,c1,c2);
}

/**
 * Strobe using classes. By Emmanuel Mahuni - 2015
 * @param {string} sel selector
 * @param {string} c1 class 1
 * @param {string} c2 class 2
 */
function strobeClass(sel, c1, c2) {
    var s = $(sel);
    s.toggleClass(c1   " "   c2);
}

/**
 * Clear the strobe to a particular class
 * @param {int} t interval id
 * @param {string} sel selector of the element
 * @param {string} c the class to set after clearing the strobe
 * @returns {null} returns null to make sure we don't come back here again, make sure the interval id is set by this and do the checking to eliminate errors.
 */
function clearStrobeToClass(t, sel, c) {
    clearInterval(t);
    $(sel).attr('class', c);
    return null;
}

использование:

Приведенный ниже код начнет мигать кнопкой выхода, когда обратный отсчет будет меньше 181. Он восстановит его, когда значение превысит 180.

 if (autoLogoutCountdown <= 180 amp;amp; (typeof strobeLogoutTimer !== typeof NaN)) {
    strobeLogoutTimer = initStrobeClass('#logout', 1000, 'logoutflash', 'logout');
} else if (autoLogoutCountdown > 180 amp;amp; (typeof strobeLogoutTimer === typeof NaN)) {
    strobeLogoutTimer = clearStrobeToClass(strobeLogoutTimer, '#logout', 'logout');
}

Я надеюсь, что это кому-то поможет