Simply put, I would like the countdown timer to NOT reset if the page is refreshed. From what I know, I have to use cookies for that. Can you tell me how I can incorporate a cookie in the following code?
I am using this example. http://www.onextrapixel.com/2011/12/01/creating-a-groupon-like-count-down-timer/
The setup is like this.
<html>
<head>
<!-- 1 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="timer.js"></script>
<!-- 3 -->
<script>
$(document).ready(function(){
var timeLeft = 12796000; // this is in milliseconds.
var timer = new Timer($('#counter'), timeLeft);
});
</script>
<!-- 4 -->
<style>
div#counter{
margin: 100px auto;
width: 305px;
padding:20px;
border:1px solid #000000;
}
div#counter span{
background-color: #00CAF6;
padding:5px;
margin:1px;
font-size:30px;
}
</style>
</head>
<body>
<!-- 2 -->
<div id="counter">
<span class="hour">00</span>
<span class="min">00</span>
<span class="sec">00</span>
</div>
</body>
</html>
timer.js
function Timer(container, timeLeft) {
// get hour, minute and second element using jQuery selector
var hoursContainer = $(container).find('.hour');
var minsContainer = $(container).find('.min');
var secsContainer = $(container).find('.sec');
// hold time left
var currentTimeLeft = timeLeft;
// 1 second = 1000 ms
var secondsForTimer = 1000;
// hold ID value return by setInterval()
var timerInterval;
// call setInteval() only when timeLeft is greater than 0
if (currentTimeLeft == 0) {
return;
} else {
//Call setInterval()function and store ID value to timerInterval.
timerInterval = setInterval(countdown, secondsForTimer);
}
//function being passed to setInterval()
function countdown() {
currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer);
if (currentTimeLeft == 0) {
//stop calling countdown function by calling clearInterval()
clearInterval(timerInterval);
return;
} else {
//calculate hours left
var wholeSeconds = parseInt(currentTimeLeft / 1000,10);
var wholeMinutes = parseInt(currentTimeLeft / 60000,10);
var wholeHours = parseInt(wholeMinutes / 60,10);
//calculate minutes left
var minutes = parseInt(wholeMinutes % 60,10);
//calculate seconds left
var seconds = parseInt(wholeSeconds % 60,10);
//prefix 0 to hour, min and second counter
$(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs"));
$(minsContainer).text((minutes < 10 ? "0" : "") + minutes + (minutes <=0 ? " min" : " mins"));
$(secsContainer).text((seconds < 10 ? "0" : "") + seconds + (seconds <=0 ? " sec" : " secs"));
}
}
}