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!
Related
I trying to implement a timer to my website, as I want the timer to be the same for anyone entering, even if the timezones is different, I believe PHP works better than javascript, using time() maybe?
I'll explain.
I want my timer to start at 50 seconds and go to 0 seconds, once it hits 0 the timer should reset. So, as mentioned, when I reload the page the timer should not reset. If the timer is e.g 34, and I reload the page, the timer should not reset back to 50, it should keep going, so if it takes 2 seconds to reload the page, the timer should be 32 in this case.
The timer should also be the same of everyone, if my friend in Russia is seeing 44 seconds, then my friend in Spain should also see 44 seconds.
I don't have an example code as I simply don't know how to do it.
I know this is probably not the best, maybe even the worst method but it works.
var count = 50;
setInterval(function(){
document.getElementById('counter').innerHTML = count;
count--;
if (count < 0){
count = 50;
}
}, 1000);
<h1 id="counter"></h1>
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);}
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}
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).
I have the following script in a js file:
// Ad score
var score = 0;
//$('#score').text(score);
function foundMatchingBlocks(event, params) {
params.elements.remove();
score += 100;
$('#score').text(score);
};
Now on each matching, 100 points are added to var score. This all works. Now I want to extend this a bit. As soon as the page loads I want to start a countdown to reduce the number of points (starting with 100) with 1 point a second for 60 seconds. So the minimum number of points a user can get is 40. When someone gets the points, the counter should reset and countdown again.
Example:
Page loads (timer starts from 100)
User has a match after 10 seconds (+90 points are added)
Counter resets and countdown from 100 again
User found a match after 35 sec (+65 points are added)
etc etc
Problem is, I have no idea how to do this :( Hope someone can help me with this.
The above is fixed, thanks all for helping!!!
The big picture is, you'll need to become pretty familiar with timeouts and intervals in javascript. This is the reference page I keep going back to when I need to refresh my memory: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
For your specific task, you'll probably want to use an Interval that triggers every 1000 milliseconds to calculate the second-by-second point reduction, and a separate Timeout for failure that resets every time the user completes their challenge.
Here are a few tips for working with timeouts and intervals that usually lead to followup questions:
When you set a timeout, always capture the return value (I think it's basically a random integer). Save it to some global var for convenience.
var failureTimer; // global var high up in your scope
failureTimer = setTimeout ( "gameOver()", 100000 ); // 100 seconds * 1000ms
Then in whichever method gets called when the player completes their challenge, you call this:
clearTimeout (failureTimer); // resets the timer and gives them another 100 seconds
failureTimer = setTimeout ( "gameOver()", 100000 ); // yes call this again, to start the 100 sec countdown all over again.
The second pain point you're likely to encounter when working with Timeouts and Intervals is how to pass parameters to the functions like gameOver() in my example above. You have to use anonymous functions, as described here:
Pass parameters in setInterval function
For more on anonymous functions, this is a good overview:
http://helephant.com/2008/08/23/javascript-anonymous-functions/
Good luck with your project! Let me know if you have any questions.
Here's some code without the use of timers. Call startCountdown() every time you want to re-initialize the count-down. Call getAvailableScore() when you want to fetch the current available score. You will have to decide what to do when the available score goes to zero.
var beginCountDownTime;
function startCountdown() {
beginCountDownTime = new Date();
}
function getAvailableScore {
var now = new Date();
var delta = (now.getTime() - beginCountDownTime.getTime()) * 1000; // time elapsed in seconds
var points = 100 - (delta / 60);
return(Math.round(Math.max(points, 0))); // return integer result >= 0
}
Maybe something like:
// Ad score
var score = 0;
var pointsAvailable = 100;
//$('#score').text(score);
function foundMatchingBlocks(event, params) {
params.elements.remove();
score += pointsAvailable;
$('#score').text(score);
pointsAvailable = 100;
};
$(document).ready(function() {doTimer();});
function doTimer() {
setTimeout('reducePoints()',1000);
}
function reducePoints() {
if(pointsAvailable>40) {
pointsAvailable--;
}
doTimer();
}