Develop Reference

CodeHS JavaScript Timer- Countdown

I work on CodeHS and need to make a countdown timer for my powerups in the game I'm making, Breakout. I need the timer to be reusable so no for loops, it needs to go down in seconds/milliseconds (it doesn't matter which) and preferably last 30 seconds or 30,000 milliseconds. Remember this is CodeHS I'm working on.

If you want something to happen 30 seconds after you start your timer you could do something like this:
//set the time remaining to 30 outside of a function so it is global
var timeRemaining = 30;
function start(){
//set the timer to run the function countdown once every second(1000 milliseconds)
setTimer(countdown, 1000)
}
function countdown(){
/*every time it is called this function subtracts one from the time if it is
more than 30, when it reaches 0 stops the timer and resets the time*/
if(timeRemaining<=0){
stopTimer(countdown);
timeRemaining = 30;
println("Done");
//30 seconds has passed, do what you need here(call your function)
}else{
timeRemaining--;
println(timeRemaining+" seconds left")
}
}
Add your function or whatever you want to happen after the time is up whereprintln("Done") is.
Because timeRemaining is set back to 30 at the end, you can reuse the timer by calling setTimer(countdown, 1000) again.
You can remove the println statments, they are just to see what is happening.
If CodeHS doesn't want hardcoded numbers (I think they call them "magic numbers"), replace the 30s with a constant set to 30.
Let me know if you need a better explanation.

Tell me if I'm wrong because I have no idea what CodeHS is, but I am quite sure that this can be achieved with a simple setInterval function.
To go by full seconds:
var timer=30;
setInterval(function(){
timer-=1;
document.getElementById(timerId). innerHTML=timer;//shows the remaining time
}, 1000);//subtracts 1 second from timer each second
To go by tenths of a second
var timer=30.0;
setInterval(function(){
timer-=0.1;
document.getElementById(timerId). innerHTML=timer;//shows the remaining time
}, 1000);//subtracts a tenth second from timer every 0.1 seconds

var timeLeft = 60;
var txt = new Text(" ","30pt Arial");
function start(){txt.setPosition(200,200); txt.setColor(Color.black); add(txt); setTimer(countdown,1000);}
function countdown(){drawTimer(); timeLeft--;}
function drawTimer(){txt.setText(timeLeft);}

Timer countdown with javascript

I have a timer countdown with javascript.It countdowns from 3 minutes.But if user reloads the page I have to resume the countdown.I mean user loaded the page and countdown starts from 3 minutes then after 1 minute user reloads the page countdown should start from 2 minutes.How can I do this ? I don't want any code I need the algorithm.

After each second change, you need to save the state of the counter into some kind of persistent storage.
I'd just use:
localStorage['time_left'] = JSON.stringify(time_left);
When you load the page, first you try to load the state of the timer.
time_left = JSON.parse(localStorage['time_left']);
And then check whether the value was even stored.
if(time_left===undefined){// you're on fresh instance
Would also be good idea to clear the stored variable after the timer finishes.
Good luck :>

You need to persist the current time left to the end of the timer somewhere where you can access it later, even after the page has been refreshed. Local storage comes to mind, but other methods may be possible.
Instead of setting the timer to 3 minutes, you set an interval to run a function every second. You save two pieces of information to your storage:
Amount of time till the end, perhaps in seconds ( 180s for 3 minutes)
Amount of time already passed since the start (0 by default, incremented with each interval)
Every time the interval function ticks, you increase the total time passed and check if it is already higher than the total amount expected. Do your custom actions when the condition is true. Do not forget to clear the interval, otherwise it will keep going on indefinitely and uselessly.

var remaining = localStorage.remaining || 180;
window.setInterval(function(){
remaining = remaining - 1;
document.querySelector('#countdown').innerHTML = remaining;
}, 1000);
window.onbeforeunload = function(){
// Save remaining time as the window is closed or navigated elsewhere
localStorage.remaining = remaining;
};

How can i run 90:00 "min" in 30 seconds?

All i need to do is this:
I have a football game (all written in pure js) which is 90:00 min.
I need to show users 90 (90:00) min and this should be counted down with animation till 00:00 in 30 seconds time...
What is the best way to approach this?
Should i use some animation library?

You can modify an existing countdown clock like this one, to use a smaller interval of time for countdown callback.
In your case you will need to call the function which handles the countdown 180 times in a second (90mins = 5400sec --> 30/5400=0.0055 --> 5.5ms) so you will have to set the callback interval to around 5.5ms. That sounds like too much calls, so you can optimize it in some way, for example you can count down 10sec in each step and in that case you will have just 18 function calls/sec which sounds more acceptable.

A simple code to count down 3min every second which stops at 0.
var minutesLeft = 90,
interval;
interval = setInterval(function () {
minutesLeft-=3;
if(minutesLeft === 0) {
clearInterval(interval);
}
, 1000}

JavaScript/JQuery countdown timer with multiple interval settings?

I want to countdown from a number, let's say 100. But I don't want the countdown to be obvious such as in seconds. I would like 3 intervals like below and if they could be random, that would be even better. Each number change, I want to setup a cookie that holds the new value.
2 seconds
8 seconds
14 seconds
So it works like so:
User lands on page, Sees the number 100, then either 2,8 or 14 seconds later, the 100 decrements down to 99 and so on until it hits 0. Say the user sees 2 intervals and is left with 98, that value should be set in the cookie, so when they visit the page again, the don't see 100, but the new value.
Hard, any plugins to help me?

You could use the $.doTimeout() jQuery Plugin along with the $.cookie() jQuery plugin together like this:
HTML:
<div id="timer"></div>
JavaScript:
var timer = ($.cookie('timer_cookie') != '') ? $.cookie('timer_cookie') : 100; // Current Timer
var intervals = [2000,8000,14000]; // Available Timer Intervals
var rand = Math.floor(Math.random()*intervals.length) // Random Number for Choosing Intervals
$('#timer').text(timer);
$.doTimeout('timer_id', intervals[rand], function(){
timer = parseInt($('#timer').text()) - 1;
$('#timer').text(timer);
$.cookie('timer_cookie', timer);
return true;
});
This is untested but should do the trick; hope it helps!

Synchronization value of the variable in JavaScript

I would like to show on my website some data, which should be changing every 30 seconds.
However, when someone open my website and there is 18 seconds left to change, JS should wait 18 seconds, change the data and then set setInterval().
I tried this code:
var howmany = 1502; //seconds
var rest = howmany % 30
if(rest > 1) {
window.setTimeout(function() {
upgradeProducts();
setInterval("upgradeProducts()", 15000);
}, rest*1000);
}
else {
setInterval("upgradeProducts()", 15000);
}
but it is not working. Where did I make mistake?

You need to take reference to current time, which would be a cross-reference between every user of your website.
In your case, the starting point is the same for everyone (30 % of 1500 seconds).