Html contdown timer

Hello, i want to set a timer on my html website that can use a selected value as the counter value, i created a js code that runs the timer but everytime i reload it, it runs the timer again.

HTML

<select  name="ddselect" id="ddselect" class="form-control" name="duration" onselect="setup();">
                        <option value="680">1 min</option>
                        <option value="120">2 mins</option>
                        <option value="300">5 min</option>
                        <option value="600">10 mins</option>
                        </select>
                        <input type="hidden" name="duration" >

Javascript

var counter = 0;
//var d = getDocumentById("ddselect");

//var timeleft = d.options[ddselect.selectedIndex].value;
var timeleft = document.getElementById("ddselect").value;


function convertSeconds(s) {
	var min = floor(s / 60);
	var sec = s % 60;
	return nf(min,2) + ':' + nf(sec,2);
}

function setup() {
    //timeleft = parseInt(document.getElementById("ddselect").value);
	noCanvas();

	var timer = select('#timer');
	timer.html(convertSeconds(timeleft - counter));

	var interval = setInterval(timeIt, 1000);

	function timeIt() {
	  counter++;
	  timer.html(convertSeconds(timeleft - counter));
	if (counter == timeleft) {
	    clearInterval(interval);
	    counter = 0;
	}	
    }
}
1 Like

I may be misunderstanding the intentions behind the program here. Do you want to be able to save and restore the counter value when you reload?

If so you need to store the value of the counter in a file somewhere and have it updated periodically, then you could restore the value of the counter by simply reading the file.