Problems with Javascript timer

I appreciate the response, I had seen that post prior to posting but being new to this whole system means I don’t fully understand it. I have managed to find out how to get the survey to auto advance to the place I want upon the timer reaching 0 by looking through these forums more thoroughly, although I am sure my solution isn’t very efficient or elegant (discussed below in case it could help anyone else.) 
However, I am still unclear on clearing the timer from the top of the screen.  The blog post I initially took this code from mentioned the distinction between static and dynamic themes possibly causing problems but it is outdated and I’m not getting the problem it describes. Currently, all of my Javascript is loaded on the first question of the block where I want the timer to appear, and that is it. Using dynamic or static themes doesn’t cause any problem but the timer persists after the block ends. The post you linked to mentions clearing the interval upon leaving the page and then executing the code on each page of the block. My code is slightly different from the code used in that post so I’m not sure if that will impact things and also I don’t know how to clear the interval. 
My assumption on what I might need to do is put the Javascript code onto the first (and/or maybe last) question of each page in the block where I want the timer to be active and also change the code (or add code somewhere, possibly under “Qualtrics.SurveyEngine.addOnUnload(function()” that when the timer is less than 0, the timer interval gets cleared. The code has a clearInterval line in it already:
function startTimer(duration, display) {  
 var timer = duration, minutes, seconds;  
 var myTimer = setInterval(function() {  
  minutes = parseInt(timer / 60, 10)  
  seconds = parseInt(timer % 60, 10);  
  minutes = minutes < 10 ? "0" + minutes : minutes;  
  seconds = seconds < 10 ? "0" + seconds : seconds;  
  var text = ('innerText' in display)? 'innerText' : 'textContent';
  display[text] = minutes + ":" + seconds;  
  if (--timer < 0) {  
  clearInterval(myTimer);  
  timeOver();  
  }  
 }, 1000);  
 }
but I don’t understand what it is doing and it might need to be changed as it comes from an outdated blog post. If someone could show me what code I need to insert (and where) to make the timer disappear from the top of the screen upon either of two conditions being met I think all of my issues would be resolved. The two conditions are:
(1) When the timer has reached 0 and the survey has auto advanced past the block where the timer matters (mentioned below) 
(2) when the participant manually advances the survey to the next block (basically completing the 100 questions before the timer expires).
Thanks again for the response and I hope someone can help me with my final issue.

How I got the auto advance to work
The important bit of the code (taken from my first post) is
var timeOver = function() {  
 document.getElementById("timer_1").innerHTML = "Time is up.";  
 x = 1;  
 var bgColor = setInterval(change, 1000);  
 }  
Also note I failed to copy the rest of the code from the blog post I took it from, but it doesn’t apply to my scenario as I don’t want the background color to flash red and white when the timer hits 0, I want the survey to advance to the end. In the above code the line starting with var bgColor… is all unneeded and can be removed.
I found another forum thread where auto advancing to a specific question was discussed (https://www.qualtrics.com/community/discussion/4508/javascript-instead-of-automatically-clicking-next-how-to-code-it-to-go-to-a-certain-question) For me, I have 100 questions total and upon the timer ending I want the survey to advance past all 100, so I set an embedded data value called “timeUp” with starting value of 0 into the survey flow before the block with the 100 questions. Then I manually set each of the 100 questions display logic to display if “timeUp” is Equal to 0 (this took a while and is why I mention it is probably inefficient). I then modified the important bit of code to this:
var timeOver = function() { 
 document.getElementById("timer_1").innerHTML = "Time is up."; 
 x = 1; 
Qualtrics.SurveyEngine.setEmbeddedData('timeUp', 1);
$('NextButton').click();
}
This makes the embedded value timeUp get set to 1 when the timer hits 0 and also automatically clicks the next button, which since none of the 100 items are able to be displayed zips the survey to the end where I want it.

Thanks again for the continued help. As a complete newbie to JavaScript (and coding in general) I am not sure how to go about clearing the interval on each page as you say. I understand that currently the code
if (--timer < 0) {  
        clearInterval(myTimer);  
        timeOver();
}
is what you are referring to when you say it keeps going. My guess at a solution would be to add another if statement that executes when the participant clicks the next page button, and would write the current timer value into embedded data and then call clearInterval again on the timer. Then on each subsequent page, copy over the script that controls the timer and change it slightly so that instead of restarting the timer at whatever starting value it is set to, have it start at whatever value is stored in the embedded data. 
If these assumptions are correct, my problem is I don’t know what the syntax is to have code execute upon clicking the next page button. 
My guess at how to write the if statement currently is:
// (previous if statement up here)

if (--timer > 0 && $(‘NextButton’) {  // Missing some information
        Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining', timer);
        clearInterval(myTimer);
}
This is missing something since I don’t know what the syntax is to make the code inside {} execute only when the NextButton is clicked.
Thanks again for all of the help!

Thanks for the fast reply, I think my inexperience is really showing because the code you mention doesn’t work for me. I added it at the very end of the addOnload function and nothing happens to the timer when it loads the next page. For clarity, the entire JavaScript I have attached to the question on the first page is:
Qualtrics.SurveyEngine.addOnload(function()
{
var headerCont = document.createElement("div"); 
               headerCont.className = "header-cont"; 
               headerCont.id = "header_container"; 
var header = document.createElement("div"); 
               header.className = "header" 
               header.id = "header_1"; 
var timer = document.createElement("div"); 
               timer.className = "timer"; 
               timer.id = "timer_1"; 
               timer.innerHTML = "Time Remaining: 07:30"; // set actual time limit correctly here
headerCont.appendChild(header); 
header.appendChild(timer); 
document.body.insertBefore(headerCont, document.body.firstChild);

function startTimer(duration, display) { 
               var timer = duration, minutes, seconds; 
               var myTimer = setInterval(function() { 
                               minutes = parseInt(timer / 60, 10) 
                               seconds = parseInt(timer % 60, 10); 
                               minutes = minutes < 10 ? "0" + minutes : minutes; 
                              seconds = seconds < 10 ? "0" + seconds : seconds; 
                              var text = ('innerText' in display)? 'innerText' : 'textContent';
                              display[text] = minutes + ":" + seconds; 
                              if (--timer < 0) { 
                                               clearInterval(myTimer); 
                                               timeOver();
                               }
               }, 1000); 
} 
var timerSeconds = 449,  // This needs to be 1 second shorter than the total time, as it seems to increment 1 late
display = document.querySelector('#time'); 
startTimer(timerSeconds, display); 
var timeOver = function() {
               document.getElementById("timer_1").innerHTML = "Time is up."; 
               x = 1; 
               Qualtrics.SurveyEngine.setEmbeddedData('timeUp', 1);
               $('NextButton').click();
 } 
Qualtrics.SurveyEngine.addOnPageSubmit(function() {
    Qualtrics.SurveyEngine.setEmbeddedData('timeRemaining',timer);
    clearInterval(myTimer);
});
});

Qualtrics.SurveyEngine.addOnReady(function()
{
//$('PreviousButton').hide();
$('PreviousButton').disable();
});

Qualtrics.SurveyEngine.addOnUnload(function()
{

               
});
I assume I have some other problem with the code somewhere that prevents what you just replied with from working. Currently running the above code without any JavaScript code on the next page’s set of questions leaves the timer running, which I assume is wrong since I believe the code you gave me should make the timer stop upon leaving the first page and require custom code to make it reappear on the next page. Also in your code above I think you missed a 'd' in EmbeddedData but if that is intentional it could also explain the problem.

Thanks again.

https://www.qualtrics.com/community/discussion/comment/29313#Comment_29313The problem with the code above is that myTimer is local to the startTimer function. It needs be to defined in the addOnload function.