Countdown timer change color at an certain time with javascript?

Im trying to make a countdown timer that would change the color when reaches two different points, it supposed to go orange when reaches “00:59” and then change to red when reaches " 00:00 " How do I do that with javascript.

heres my code

<script type="text/javascript">
function eventstime(lasttime, repeattime, showid, opentime) {
    if (lasttime < 0) lasttime = repeattime-1;
    if (lasttime <= opentime) {
        document.getElementById(showid).innerHTML = "is Open";
        setTimeout('eventstime('+(lasttime-1)+', '+repeattime+', \''+showid+'\', '+opentime+');', 999);
    } else {
        var secs = lasttime % 60;
        if (secs < 10) secs = '0'+secs;
        var lasttime1 = (lasttime - secs) / 60;
        var mins = lasttime1 % 60;
        if (mins < 10) mins = '0'+mins;
        lasttime1 = (lasttime1 - mins) / 60;
        var hours = lasttime1 % 24;
        var days = (lasttime1 - hours) / 24;
        if (days > 1) days = days+' days ';
        else if (days > 0) days = days+' day ';
        document.getElementById(showid).innerHTML = days+hours+':'+mins+':'+secs;
        setTimeout('eventstime('+(lasttime-1)+', '+repeattime+', \''+showid+'\', '+opentime+');', 999);
    }
}
</script>

<?
echo'

<table>';
$eventtime[1]['name']   = '<a href="#">Blood Castle</a>';
$eventtime[1]['start']      = 'Jan 01,  2011 00:19:00';
$eventtime[1]['repeattime'] = '3600';
$eventtime[1]['opentime']   = '300';

$eventtime[2]['name']   = '<a href="#">Devil Square</a>';
$eventtime[2]['start']      = 'Jan 01,  2011 01:00:00';
$eventtime[2]['repeattime'] = '7200';
$eventtime[2]['opentime']   = '300';

$eventtime[3]['name']   = '<a href="#">Castle Siage</a>';
$eventtime[3]['start']      = 'Jan 01,  2011 00:00:00';
$eventtime[3]['repeattime'] = '7200';
$eventtime[3]['opentime']   = '300';

$eventtime[4]['name']   = 'Golden Invasion';
$eventtime[4]['start']      = 'Jan 01,  2011 01:00:00';
$eventtime[4]['repeattime'] = '7200';
$eventtime[4]['opentime']   = '300';

$eventtime[5]['name']   = 'Castle Deep';
$eventtime[5]['start']      = 'Jan 01,  2011 01:05:00';
$eventtime[5]['repeattime'] = '80000';
$eventtime[5]['opentime']   = '300';

$eventtime[6]['name']   = 'Castle Siege';
$eventtime[6]['start']      = 'Jan 01,  2011 01:00:00';
$eventtime[6]['repeattime'] = '604800';
$eventtime[6]['opentime']   = '300';

define('WEBSITE_REAL_TIME', time());
$i = 0;
echo '';
foreach ($eventtime as $value) {
    $i++;
    $bc_remain = $value['repeattime'] - ((WEBSITE_REAL_TIME - strtotime($value['start'])) % $value['repeattime']);
    $startevents .= 'eventstime('.$bc_remain.', '.$value['repeattime'].', \'event'.$i.'\', '.$value['opentime'].'); ';
    echo '<tr><td width="30" height="21px"></td>
      <td width="138" height="21px"></td>
    </tr>
    <tr>
      <td height="21px"><span style="color:#FFCC00;font-size: 135%;">'.$value['name'].'</span></td>
      <td height="21px"><span id="event'.$i.'" style="color:#FFCC00;font-size: 135%;font-family:celtic;"></span></td>
    </tr>';
}
echo '<script type="text/javascript">'.$startevents.'</script>
</table>';
?>
<style>

So in the js in the big else statement, you can change the color of the text. So you would write some if statement saying if it got to a certain second change the color.

document.getElementById(showid).style.color = 'red';

I hope that helps. Good luck!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.