JavaScript时钟：时间间隔冲突

Question

Hi I'm new to programming and am working on a JavaScript clock. I got it to change background color depending on whether it's an even or odd minute, and it changes text color every hour. However, I'm having trouble integrating a third task in: I'm trying to get it to change to a random color every five minutes, thus overriding the even-or-odd statements. So minute 1: odd, minute 2: even, 3: odd, 4: even, 5: RANDOM COLOR.

Since the function to change the background color every five minutes ( lines 75 to 83 ) is set on an interval, that conflicts with the interval set for getting the date ( line 71 ).

As it stands now, the effects of Tasks 2 and 3 are not visible until Task 1 is commented out. Is there a way to perhaps combine Task 1 with the if/else statement on lines 11-24, so that all my tasks can run concurrently?

Answer 1

Use a single timer function to carry out all events. To get more accurate timing, set your timer to execute once every 100 milliseconds and maintain a counter. Based on the counter value, you can execute specific tasks at various intervals and also check for overlap of intervals. The counter can be reset when it reaches the largest interval you need to track.

Here is a sample:

var counter = 0;
var oldsec = 0;
setInterval(function(){timerInt()}, 100);

function timerInt(){
    // Read system clock and get seconds
    if (seconds <> oldsec) {
        // Update clock time here and set oldsec=seconds
    }


    // Execute other tasks
    if (counter % 3000 == 0) {  // Executes once every 5 minutes (300*10)

    }
    else if (counter % 1200 == 0) {  // Executes once in 2 minutes (120*10)

    }
    else if (counter % 600 == 0) {  // Executes once a minute (60*10)

    }

    counter += 1;
    if (counter == 3000) counter = 0;
}

You can use if and else to control which tasks to execute. Your clock seconds update will also be more accurate and will not "skip" seconds like it would with a 1000 millisecond timer.