I m not sure how to start this off. I have a bunch of li and I want to add a class let s say .red to li.target at a random time then after a set time remove it. Then repeat.

I found a few things online ... but nothing really helps me in my situation.


<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="target"></li>


Thank you


Here is another option with jquery. Credits are due to css-tricks.com.. This script has been inspired by one of their published articles. I modified it to create a blinking effect announcement, but you can always use it to change the color of specific li.

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<title>Random Color list </title>
<style type="text/css" media="screen">

    #target {

    #target.color_red {


   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

   <script type="text/javascript">
function randRange(data) {
        var newTime = data[Math.floor(data.length * Math.random())];
        return newTime;

function toggleSomething() {
    var timeArray = new Array(100, 500, 250, 650, 2000, 3000, 1000, 1500);


    timer = setInterval(toggleSomething, randRange(timeArray)); 

var timer = setInterval(toggleSomething, 1000);
// 1000 = Initial timer when the page is first loaded



<h1>My list and target</h1>

<li id="target">This is a target li</li>



You can control the random time in micro-secs by changing values in the array

var timeArray = new Array(100, 500, 250, 650, 2000, 3000, 1000, 1500);