Question

So I have multiple spans like this:

<span unselectable="on" 
    onmouseover="this.style.backgroundColor='#ffcc99';"
    onmouseout="this.style.backgroundColor='#a8c0f0';"
    onclick="javascript stuff" 
    style="-webkit-user-select:none;
        -moz-user-select:none;
        display: inline-block; 
        cursor: pointer;
        font-family: arial; 
        background: #a8c0f0;
        padding-top:9px;
        padding-bottom:9px;
        padding-right:9px;
        padding-left:9px;">
    My Span
</span>

I’d like them to twinkle/blink if you will, with each changing background colors from their normal color state to another color I’ll define for just about .5 to 1 second and then back to their normal color.

But I would like them all to fire at random times so it doesn’t look like a pattern. Just occasional lazy twinkles. Like once every 8-15 seconds.

I noticed “onload” doesn’t work with SPANs so I’m not sure how I would do it.

Answer 1

• Get a reference to all span elements.
• Store their original background color with style.backgroundColor.
• Generate a random number of seconds.
• Use setInterval() with a 1000 interval.
• Each interval, decrement the random number of seconds. When it is 0, change the background color. Use a new setTimeout() to restore the original color.
• Generate a new random number of seconds and repeat.