Question

我想像jquery那样用闪光灯做一个div。每500毫秒基本上将背景颜色从黑色更改为白色。

我该怎么做？

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

谢谢！

Answer 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);

Answer 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);

Answer 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 && (typeof strobeLogoutTimer !== typeof NaN)) {
    strobeLogoutTimer = initStrobeClass('#logout', 1000, 'logoutflash', 'logout');
} else if (autoLogoutCountdown > 180 && (typeof strobeLogoutTimer === typeof NaN)) {
    strobeLogoutTimer = clearStrobeToClass(strobeLogoutTimer, '#logout', 'logout');
}

我希望这有助于某人

Jquery div strobe

3 个答案: