We Keep Coding

localStorage how to save countdown value so it wont reset when I reload the page

When I reload the page, my 1 minute countdown also reloads.
I tried to use localStorage but it seems to me failed.
Please have a look, I do not know where I should fix.
Thank you
My script
/* for countdown */
var countDown = (function ($) {
// Length ms
var timeOut = 10000;
// Interval ms
var timeGap = 1000;
var currentTime = (new Date()).getTime();
var endTime = (new Date()).getTime() + timeOut;
var guiTimer = $("#clock");
var running = true;
var timeOutAlert = $("#timeout-alert");
timeOutAlert.hide();
var updateTimer = function() {
// Run till timeout
if(currentTime + timeGap < endTime) {
setTimeout( updateTimer, timeGap );
}
// Countdown if running
if(running) {
currentTime += timeGap;
if(currentTime >= endTime) { // if its over
guiTimer.css("color","red");
}
}
// Update Gui
var time = new Date();
time.setTime(endTime - currentTime);
var minutes = time.getMinutes();
var seconds = time.getSeconds();
guiTimer.html((minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds);
if (parseInt(guiTimer.html().substr(3)) <= 10){ // alert the user that he is running out of time
guiTimer.css('color','red');
timeOutAlert.show();
}
};
var pause = function() {
running = false;
};
var resume = function() {
running = true;
};
var start = function(timeout) {
timeOut = timeout;
currentTime = (new Date()).getTime();
endTime = (new Date()).getTime() + timeOut;
updateTimer();
};
return {
pause: pause,
resume: resume,
start: start
};
})(jQuery);
jQuery('#break').on('click',countDown.pause);
jQuery('#continue').on('click',countDown.resume);
var seconds = 60; // seconds we want to count down
countDown.start(seconds*1000);
I tried to fix it but I dont know where/how to put localStorage.

This may help you.
HTML Code:
<div id="divCounter"></div>
JS Code
var test = 60;
if (localStorage.getItem("counter")) {
if (localStorage.getItem("counter") <= 0) {
var value = test;
alert(value);
} else {
var value = localStorage.getItem("counter");
}
} else {
var value = test;
}
document.getElementById('divCounter').innerHTML = value;
var counter = function() {
if (value <= 0) {
localStorage.setItem("counter", test);
value = test;
} else {
value = parseInt(value) - 1;
localStorage.setItem("counter", value);
}
document.getElementById('divCounter').innerHTML = value;
};
var interval = setInterval(function() { counter(); }, 1000);

html not updating until the end of an ajax function

I'm trying to write a 3 second countdown function in JavaScript. The start of the countdown is set by the server so I have setInterval function which calls an ajax function which runs a script on the server to see if it is ready to start the countdown. If the countdown is set, the data returned is that the countdown is ready and will start in a specified number of milliseconds.
I've got the following function which, if I step through I can see the screen updating step by step. However, when I simply run the script it updates everything in bulk. I do not understand why?
$.ajax({
url : "/check_countdown/", // the endpoint
type : "GET", // http method
data : { info : info }, // data sent with the post request
// handle a successful response
success : function(json) {
console.log(json);
if (json.ready == 'True') {
// if we have a start_time then we get ready for the count down
console.log("Countdown ready to start!"); // sanity check
// stop pinging the server
clearInterval(countdownInterval);
// clear screen
$('#holdingImage').hide();
// show countdown block
$('#countdownText').show();
startTime = new Date().getTime() + json.milliseconds;
nowTime = new Date().getTime();
console.log("Every ", nowTime, startTime);
while (nowTime < startTime) {
nowTime = new Date().getTime();
}
$('#countdownText').html("<h1>Three</h1>");
startTime = startTime + 1000;
console.log("Second ", nowTime, startTime);
while (nowTime < startTime) {
nowTime = new Date().getTime();
}
$('#countdownText').html("<h1>Two</h1>");
startTime = startTime + 1000;
console.log("Counts ", nowTime, startTime);
while (nowTime < startTime) {
nowTime = new Date().getTime();
}
$('#countdownText').html("<h1>One</h1>");
} else {
console.log("Countdown NOT ready to start!"); // another sanity check
}
},
// handle a non-successful response
error : function(xhr,errmsg,err) {
$('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
" <a href='#' class='close'>×</a></div>"); // add the error to the dom
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
I figure a second (1000 milliseconds) between updates should be enough?

$.ajax({
url : "/check_countdown/", // the endpoint
type : "GET", // http method
data : { info : info }, // data sent with the post request
async: false, //<---- Add this
....
only Add (async: false)

This is the solution that I came up with. I'm not convinced by its efficacy but ...
I changed the success function to:
success : function(json) {
console.log(json);
if (json.ready == 'True') {
// if we have a start_time then we get ready for the count down
console.log("Countdown ready to start!"); // sanity check
console.log(json);
// stop pinging the server
clearInterval(countdownInterval);
// clear screen
$('#holdingImage').hide();
// show countdown block
$('#countdownText').show();
startTime = new Date().getTime() + json.milliseconds;
nowTime = new Date().getTime();
while (nowTime < startTime) {
nowTime = new Date().getTime();
}
startCountdown();
}
I added a new function called startCountdown() which is:
function startCountdown () {
var display1 = document.querySelector('#countdownText'),
startTime = 5,
remainingTime = startTime,
timer = new CountDownTimer(startTime);
timer.onTick(format1).start();
function format1(minutes, seconds) {
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display1.textContent = seconds;
remainingTime = parseInt(minutes) * 60 + parseInt(seconds);
if ((minutes=="00") && (seconds=="00")){
console.log("time expired!"); // sanity check
}
}
}
And then I used this timer.js script which I had from elsewhere (I do not know where I got it so cannot credit the author - sorry)
function CountDownTimer(duration, granularity) {
this.duration = duration;
this.granularity = granularity || 1000;
this.tickFtns = [];
this.running = false;
}
CountDownTimer.prototype.start = function() {
if (this.running) {
return;
}
this.running = true;
var start = Date.now(),
that = this,
diff, obj;
(function timer() {
diff = that.duration - (((Date.now() - start) / 1000) | 0);
if (diff > 0) {
setTimeout(timer, that.granularity);
} else {
diff = 0;
that.running = false;
}
obj = CountDownTimer.parse(diff);
that.tickFtns.forEach(function(ftn) {
ftn.call(this, obj.minutes, obj.seconds);
}, that);
}());
};
CountDownTimer.prototype.onTick = function(ftn) {
if (typeof ftn === 'function') {
this.tickFtns.push(ftn);
}
return this;
};
CountDownTimer.prototype.expired = function() {
return !this.running;
};
CountDownTimer.parse = function(seconds) {
return {
'minutes': (seconds / 60) | 0,
'seconds': (seconds % 60) | 0
};
};
CountDownTimer.prototype.stop = function() {
this.running = false;
};
All in, it gives me my desired result

Javascript Countdown Timer redirect after End

I have a JavaScript Countdown and I want it to redirect to another site when the countdown ends.
How can I do that?
Code:
(function ( $ ) {
"use strict";
$.fn.countdownTimer = function( options ) {
// This is the easiest way to have default options.
var settings = $.extend({
endTime: new Date()
}, options );
var $this = $(this);
var $seconds = $this.find(".time.seconds");
var $minutes = $this.find(".time.minutes");
var $hours = $this.find(".time.hours");
var $days = $this.find(".time.days");
var seconds = 0;
var minutes = 0;
var days = 0;
var hours = 0;
var switchCountdownValue = function ($obj, val) {
// Add leading zero
var s = val+"";
while (s.length < 2) s = "0" + s;
if(Modernizr.cssanimations) {
// Fade out previous
var prev = $obj.find(".value").addClass("fadeOutDown").addClass("animated");
// Add next value
var next = $("<div class='value'>" + s + "</div>");
$obj.prepend(next);
// Fade in next value
next.addClass("fadeInDown").addClass("animated");
// Remove from DOM on animation end
// Fix for Safari (if window is not active, then webkitAnimationEnd doesn't fire, so delete it on timeout)
var to = setTimeout(function(){ prev.remove() }, 200);
prev.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
prev.remove();
clearTimeout(to);
});
} else {
// Remove previous value
var prev = $obj.find(".value").remove();
// Add next value
var next = $("<div class='value'>" + s + "</div>");
$obj.prepend(next);
}
}
var timerId = countdown(settings.endTime,
function(ts) {
if(seconds != ts.seconds) {
switchCountdownValue($seconds, ts.seconds);
seconds = ts.seconds;
}
if(minutes != ts.minutes) {
switchCountdownValue($minutes, ts.minutes);
minutes = ts.minutes;
}
if(hours != ts.hours) {
switchCountdownValue($hours, ts.hours);
hours = ts.hours;
}
if(days != ts.days) {
switchCountdownValue($days, ts.days);
days = ts.days;
}
},
countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS);
return this;
};}( jQuery ));
HTML:
<script type="text/javascript">
$().ready(function(){
$(".countdown").countdownTimer({
endTime: new Date("May 13, 2016 20:00:00")
});
$("#notifyMe").notifyMe();
$("#bg-canvas").bezierCanvas({
maxStyles: 1,
maxLines: 50,
lineSpacing: .07,
spacingVariation: .07,
colorBase: {r: 120,g: 100,b: 220},
colorVariation: {r: 50, g: 50, b: 30},
moveCenterX: 0,
moveCenterY: 0,
delayVariation: 3,
globalAlpha: 0.4,
globalSpeed:30,
});
$().ready(function(){
$(".overlap .more").click(function(e){
e.preventDefault();
$("body,html").animate({scrollTop: $(window).height()});
});
});
});
</script>
C&P Code from internet:
http://pastebin.com/CvYNBSED
The Countdown is working perfectly, but I want a redirect when the Countdown ends.
Edit:
Thanks for helping but my problem is, how can I make the if question or how can I check when the countdown has finished?
I know how to make a redirect but I dont know how to check if the countdown is finished.

How to redirect to another webpage in JavaScript/jQuery?
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
as long as your countdown is working, as you said.
Edit.
try the check here:
var timerId = countdown(settings.endTime,
function(ts) {
if(seconds != ts.seconds) {
switchCountdownValue($seconds, ts.seconds);
seconds = ts.seconds;
}
if(minutes != ts.minutes) {
switchCountdownValue($minutes, ts.minutes);
minutes = ts.minutes;
}
if(hours != ts.hours) {
switchCountdownValue($hours, ts.hours);
hours = ts.hours;
}
if(days != ts.days) {
switchCountdownValue($days, ts.days);
days = ts.days;
}
// maybe this will work.
// I didn't check your countdown library because it's minified / uglified
if(days == 0 && hours == 0 && minutes == 0 && seconds == 0){
//redirect here
}
},
countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS);

How about extending your countdownTimer class to add a onDone function to be executed upon completion of the countdown?
...
var settings = $.extend({
endTime: new Date(),
onDone: function () {
window.location.href('http://www.google.com')
}
}, options );
...
Then have your component execute that method when the countdown finishes:
...
prev.one('webkitAnimationEnd ...', function(){
if (settings.onDone) {
settings.onDone();
}
});
...
Just a thought, but to simply answer the question of redirect, then #nonsensei's should suffice.

Pause/Stop Counter On Last Slide

I have the following lines of code on my website:
HTML
<div class="qa">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>Last</div>
</div>
<p class="countdown-timer">00:01:00</p>
JavaScript/jQuery
$(document).ready(function() {
$('.qa').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: false,
arrows: true,
mobileFirst: true,
respondTo: 'window',
useCSS: true,
swipeToSlide: false
});
});
function Stopwatch(config) {
// If no config is passed, create an empty set
config = config || {};
// Set the options (passed or default)
this.element = config.element || {};
this.previousTime = config.previousTime || new Date().getTime();
this.paused = config.paused && true;
this.elapsed = config.elapsed || 0;
this.countingUp = config.countingUp && true;
this.timeLimit = config.timeLimit || (this.countingUp ? 60 * 10 : 0);
this.updateRate = config.updateRate || 100;
this.onTimeUp = config.onTimeUp || function() {
this.stop();
};
this.onTimeUpdate = config.onTimeUpdate || function() {
console.log(this.elapsed)
};
if (!this.paused) {
this.start();
}
}
Stopwatch.prototype.start = function() {
// Unlock the timer
this.paused = false;
// Update the current time
this.previousTime = new Date().getTime();
// Launch the counter
this.keepCounting();
};
Stopwatch.prototype.keepCounting = function() {
// Lock the timer if paused
if (this.paused) {
return true;
}
// Get the current time
var now = new Date().getTime();
// Calculate the time difference from last check and add/substract it to 'elapsed'
var diff = (now - this.previousTime);
if (!this.countingUp) {
diff = -diff;
}
this.elapsed = this.elapsed + diff;
// Update the time
this.previousTime = now;
// Execute the callback for the update
this.onTimeUpdate();
// If we hit the time limit, stop and execute the callback for time up
if ((this.elapsed >= this.timeLimit && this.countingUp) || (this.elapsed <= this.timeLimit && !this.countingUp)) {
this.stop();
this.onTimeUp();
return true;
}
// Execute that again in 'updateRate' milliseconds
var that = this;
setTimeout(function() {
that.keepCounting();
}, this.updateRate);
};
Stopwatch.prototype.stop = function() {
// Change the status
this.paused = true;
};
$(document).ready(function() {
/*
* First example, producing 2 identical counters (counting down)
*/
$('.countdown-timer').each(function() {
var stopwatch = new Stopwatch({
'element': $(this), // DOM element
'paused': false, // Status
'elapsed': 1000 * 60 * 1, // Current time in milliseconds
'countingUp': false, // Counting up or down
'timeLimit': 0, // Time limit in milliseconds
'updateRate': 100, // Update rate, in milliseconds
'onTimeUp': function() { // onTimeUp callback
this.stop();
$(this.element).html('Times Up');
$(".qa").slick('slickGoTo', $('.qa div').length);
},
'onTimeUpdate': function() { // onTimeUpdate callback
var t = this.elapsed,
h = ('0' + Math.floor(t / 3600000)).slice(-2),
m = ('0' + Math.floor(t % 3600000 / 60000)).slice(-2),
s = ('0' + Math.floor(t % 60000 / 1000)).slice(-2);
var formattedTime = h + ':' + m + ':' + s;
$(this.element).html(formattedTime);
}
});
});
/*
* Second example, producing 1 counter (counting up)
*/
var stopwatch = new Stopwatch({
'element': $('.countup-timer'), // DOM element
'paused': false, // Status
'elapsed': 0, // Current time in milliseconds
'countingUp': true, // Counting up or down
'timeLimit': 1000 * 60 * 1, // Time limit in milliseconds
'updateRate': 100, // Update rate, in milliseconds
'onTimeUp': function() { // onTimeUp callback
this.stop();
$(this.element).html('Countdown finished!');
},
'onTimeUpdate': function() { // onTimeUpdate callback
var t = this.elapsed,
h = ('0' + Math.floor(t / 3600000)).slice(-2),
m = ('0' + Math.floor(t % 3600000 / 60000)).slice(-2),
s = ('0' + Math.floor(t % 60000 / 1000)).slice(-2);
var formattedTime = h + ':' + m + ':' + s;
$(this.element).html(formattedTime);
}
});
});
Example/Demo
When the countdown timer reaches 0, it will transition the carousel's current position to the last slide and stop the counter from running.
As there are previous and next buttons which need to be included in my project, the user may want to manually navigate to this position before the countdown timer has completed.
How can I pause or stop the counter if and when they reach the last slide?

You can listen to slick's afterChange event, and when handled, start or stop the stopwatch depending on how the current slide's position compares against the total slide count. For example:
$('.qa').on('afterChange', function(slick, currentSlide) {
if(currentSlide.currentSlide < currentSlide.slideCount - 1) {
theStopwatch.start();
} else {
theStopwatch.stop();
}
});
On a page change, this snippet will pause the stopwatch on the last slide and resume it on any previous slide.
Note that I refer to your stopwatch as theStopwatch. You'll need to make your primary stopwatch accessible to your event handler.
Source: http://kenwheeler.github.io/slick/ (search for 'afterChange')

How to set 2 time intervals for the same function?

I need to know how to set 2 time intervals for the same function?I mean that, now i have set timeinterval of 1 sec to continuously monitor the output of server file.If the output of server file is 0,then color of extension icon changes and it shows a notification.Now the problem is that i have written both these functionalities in the same function.So as i have set time interval for 1 sec and call that function,the notification shows every 1 sec and the color of icon also changes every 1 sec based on server output,which is fine.Now what I need is that i need to change the color every 1 sec.but i need to show notification only every 5 min.can you please help me.i have posted my background.js.can you please help me?
here is my background.js
var myNotificationID = null;
var oldChromeVersion = !chrome.runtime;
var interval = 5 * 60 * 1000; // 5 minutes in milliseconds
var lastNotification = 0;
setInterval(function() {
updateIcon();
}, 1000);
function getGmailUrl() {
return "http://calpinemate.com/";
}
function isGmailUrl(url) {
return url.indexOf(getGmailUrl()) == 0;
}
function onInit() {
updateIcon();
if (!oldChromeVersion) {
chrome.alarms.create('watchdog',{periodInMinutes:5,delayInMinutes: 0});
}
}
function onAlarm(alarm) {
if (alarm && alarm.name == 'watchdog') {
onWatchdog();
}
else {
updateIcon();
}
function onWatchdog() {
chrome.alarms.get('refresh', function(alarm) {
if (alarm) {
console.log('Refresh alarm exists. Yay.');
}
else {
updateIcon();
}
});
}
if (oldChromeVersion) {
updateIcon();
onInit();
}
else {
chrome.runtime.onInstalled.addListener(onInit);
chrome.alarms.onAlarm.addListener(onAlarm);
}
function updateIcon(){
if(localStorage.username){
var urlPrefix = 'http://www.calpinemate.com/employees/attendanceStatus/';
var urlSuffix = '/2';
var req = new XMLHttpRequest();
req.addEventListener("readystatechange", function() {
if (req.readyState == 4) {
if (req.status == 200) {
var item=req.responseText;
if(item==1){
chrome.browserAction.setIcon({path:"calpine_logged_in.png"});
chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
chrome.browserAction.setBadgeText({text:""});
chrome.notifications.clear('id1', function(){});
}
else{
chrome.browserAction.setIcon({path:"calpine_not_logged_in.png"});
chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
chrome.browserAction.setBadgeText({text:""});
var now = new Date().getTime();
if (now - lastNotification > interval) {
chrome.notifications.create(
'id1',{
type: 'basic',
iconUrl: '/calpine_not_logged_in.png',
title: 'Warning : Attendance',
message: 'Please mark your Attendance !',
buttons: [{ title: 'Mark',
iconUrl: '/tick.jpg'
},{ title: 'Ignore',
iconUrl: '/cross.jpg'}],
priority: 0},
function(id) { myNotificationID = id;}
);
}
}
}
else {
alert("ERROR: status code " + req.status);
}
}
});
var url = urlPrefix + encodeURIComponent(localStorage.username) + urlSuffix;
req.open("GET", url);
req.send(null);
}
}
onInit();

One possible approach is to keep track of the time when the last notification was displayed and always check if 5 minutes have passed since. E.g.:
/* Put these 2 lines at the very top of your script */
var interval = 5 * 60 * 1000; // 5 minutes in milliseconds
var lastNotification = 0;
Then, inside the updateIcon() function, replace this line:
chrome.notifications.create(...);
with these lines:
var now = new Date().getTime();
if (now - lastNotification > interval) {
lastNotification = now;
chrome.notifications.create(...);
}
The above piece of code will make sure the notification is created only if 5 minutes have passed since the last time a notification was created. It will also update the lastNotification variable with the present time.

Have this code, which runs functionA every 60 seconds, and in between functionB
var launchTime = undefined;
function Launcher() {
if (undefined == launchTime) {
launchTime = new Date();
}
nowTime = new Date();
diff = (nowTime.getTime() - launchTime.getTime()) / 1000;
if (diff % 60 == 0 and diff > 0) { // 60 seconds have passed
functionA();
} else { // 1 second has passed
functionB();
}
}
function functionA() {
}
function functionB() {
}
setInterval(function() { Launcher(); }, 1000);