Databases
StackOverflow2013
Postsdbo
POChanging div styles using a javascript timer with different intervals
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging div styles using a javascript timer with different intervals
    primarykey
    data
    text
    <p>Currently I have the following code creating my timer:</p> <pre><code>&lt;script type="text/javascript"&gt; var interval; var minutes = 8; var seconds = 10; function countdown(element) { interval = setInterval(function() { var el = document.getElementById(element); if(seconds == 0) { if(minutes == 0) { alert(el.innerHTML = "countdown's over!"); clearInterval(interval); return; } else { minutes--; seconds = 60; } } if(minutes &gt; 0) { var minute_text = minutes + (minutes &gt; 1 ? ' minutes' : ' minute'); } else { var minute_text = ''; } var second_text = seconds &gt; 1 ? 'seconds' : 'second'; el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; seconds--; }, 1000); } &lt;/script&gt; </code></pre> <p>And I use the following buttons to trigger it:</p> <pre><code>&lt;input type="button" onclick="countdown('countdown');" value="Start" /&gt; &lt;input type="button" onclick="clearInterval(interval);" value="Pause" /&gt; </code></pre> <p>How can I track the timer and change page styles as time goes by?</p> <p>For example, when I click start I want to highlight one div, after 5 seconds I want to highlight another div and unhighlight the first, 20 seconds after that I want to change the highlight again, 10 seconds after that I change the highlight again, and so on. </p> <p>The intervals should be able to be different times, but most cases will follow the pattern above (0, 5, 5, 20, 10, 20, 10, 20, 10...) so that's a good starting place. The total length of the timer is always 8 minutes, so the intervals can be hard coded and I could use PHP to select the correct code (although inefficient, probably easiest).</p> <p>Anyone have any ideas?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAndrew
    1. USAndrew
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POChanging div styles using a javascript timer with different intervals
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you post examples of what you currently have?
      singulars
      1. POChanging div styles using a javascript timer with different intervals
      1. USJoshua Pack
    2. COyou can create a callback function inside of countdown() then check the time and highlight div's accordingly.
      singulars
      1. POChanging div styles using a javascript timer with different intervals
      1. USjarchuleta
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload