What is the best way to count from one preset number to a higher or lower number on input, and show the animation of the change?
There will be an initial amount, let say 100; and when we give it an increased or decreased number, let's say 200, the original 100 will count up animated to 200.
You can use setInterval like this:
var count = 100;
var number = 110;
var interval = setInterval(function(){
document.getElementById('elementID').innerHTML = ++count;
if (count === number) { clearInterval(interval) }
}, 500);
Use ++count if you want to increase or --count if you want to decrease.
Working Example
Not 100% sure I understand what you mean, but the count thing is simple:
function count() {
var i; //declare i for use later in the function
for (i = 100; i <= 200; i++) {
alert(i);
}
}
Related
I have coded this small script which increments a given value, in this case 200, by 1 every 3.2 seconds.
var i = 200;
function increment() {
i++;
document.getElementById('generated').innerHTML = Number(i).toLocaleString('en');
}
setInterval('increment()', 3200);
I'm trying to make the script stop increasing the value once it reaches a certain point (let's say 300 for example). I'm sure it's a simple fix but I can't think up of how to go about this.
You need to save the interval and then clear it:
var i = 200;
function increment() {
if (i >= 300) {
clearInterval(interval);
return;
}
i++;
document.getElementById('generated').innerHTML = Number(i).toLocaleString('en');
}
var interval = setInterval(increment, 3200);
Note that you can pass a function name instead of using the "interval()" string notation.
Here is a fiddle (I've sped up the time so that it doens't take forever to prove a point)
Hope it helps!
var i = 200;
function increment() {
if (i == 300) {
// stop when it hits 300
window.clearInterval(id);
return;
}
i++;
document.getElementById('generated').innerHTML = Number(i).toLocaleString('en');
}
var id = window.setInterval('increment()', 3200);
I think you could put it in IF statement as:
var i = 200;
function increment() {
if(i<300){
i++
}
}
increment();
You could use a for loop.
var i = 200;
var max = 300;
function increment() {
for (i < max; i++) {
document.getElementById('generated').innerHTML = Number(i).toLocaleString('en');
}
}
setInterval('increment()', 3200);
More info here: http://www.w3schools.com/js/js_loop_for.asp
I've got the following variable JS:
http://jsfiddle.net/c8u8wLsL/13/
$(document).ready(function () {
var total = 15.5,
value = 0,
elem = $('div');
var interval = setInterval(function () {
elem.text(value.toFixed(1) + '$');
if (value >= total) {
clearInterval(interval);
}
value = value + 0.1;
}, 5);
});
Two questions:
The resulting number is 15.6 why?
How can I make the incrementation spend the same amount of time from 0 to the target value? (from 0 to 25 spends the same time as from 0 to 250)
You forget to exit from function. Also you should probably update node's text after checking total.
if (value >= total) {
return clearInterval(interval);
}
elem.text(value.toFixed(1) + '$');
fiddle http://jsfiddle.net/Lqxsh39q/
To solve second problem you can pre-calculate duration of each interval before it setup. And use it like second argument in setInterval. Something like duration = 1000 / (total * 10); or any formula that you want.
fiddle: http://jsfiddle.net/Lqxsh39q/1/
#Glen Swift's answer is correct but I have to point out regarding your original code:
You get the resulting number as 15.6 because:
When you think you are getting 15.5 as the result, you are actually getting 15.4999999, which is smaller than 15.5 and hence the if condition is false even if you think it is true. So it gets incremented once again, giving the final result as 15.6.
As far as the second part is concerned, to get the same time, you need to have the same number of steps for each addition rather than the fixed 0.1. Let's say you want to reach the target in 100 steps everytime, you can divide the total interval by 100 and then replace it in the code where you are writing 0.1 currently.
The final code should look something like:
$(document).ready(function () {
var total = 15.5,
value = 0,
ment=(total-value)/100,
elem = $('div');
var interval = setInterval(function () {
if (value >= total) {
return clearInterval(interval);
}
elem.text(value.toFixed(1) + '$');
value = value + ment;
}, 5);
});
See the fiddle here
Your existing code:
var interval = setInterval(function () {
elem.text(value.toFixed(1) + '$');
if (value >= total) {
clearInterval(interval);
}
value = value + 0.1;
}, 5);
It should check for the >= total condition first. if condition fails then exit the function.
But you are modifying the text element before the check. thus your error.
This would do.
var interval = setInterval(function () {
value = value + 0.1;
if (value <= total) {
elem.text(value.toFixed(1) + '$');
} else {
clearInterval(interval);
}
}, 5);
The behaviour I want is this: The background color changes to say, gold, and remains that color for say X length of time. Then, background color changes to say, red, and remains that color for say Y length of time. The background color then changes back to gold and remains that color for X length of time. Then the background color changes back to red and stays that way for Y length of time. This whole kit and caboodle executes in a loop-style fashion for Z number of times and then ends.
I've tried putting setInterval'd functions into a for loop (in order to count the number of times we make the change) but have found that all of the functions that have been set to setInterval themselves all start running the interval timers at the same time (not in sequence).
I hope this is clear. Here is a JSFiddle of my efforts: http://jsfiddle.net/6WE6s/3/ I've managed to get the background color to change in a even pattern, but I want the pattern described above and I'm confused as to what to do next.
Thanks in advance for the help! :)
var colors = [
['gold', 2000], // X = 2000 miliseconds
['red', 1000] // Y = 1000
],
repeat = 3, // Z = 3,
index = 0, // current position in colors array
changeColor = function( ) {
// if index == colors.length then mod = 0
var mod = index % colors.length;
if(!index || mod || --repeat ) {
index = mod;
var data = colors[ index++ ]; // data = [ currentColor, currentColorTimeout ]
document.body.style.background = data[0];
setTimeout( changeColor, data[1] ); // and so on
}
//if index >0 && index == last
//then decrement `repeat` and check if is == 0
//nothing to do :)
};
changeColor(); // run
This is a simple example. You can make function with arguments(colors,repeats) and its body as above.
Note:
setInterval isn't suitable for this purpose because in setInterval you pass timeout once
If repeat initially is 0 will be an infinite number of repetitions
Don't use setInterval(). With setTimeout() you can do something like this:
function changeColors(colors, repeats) {
var i = 0;
if (typeof repeats === "undefined")
repeats = 1;
function doNext() {
if (i >= colors.length){
if (--repeats > 0)
i = 0;
else
return;
}
$('body').css('background-color', colors[i].color);
setTimeout(doNext, colors[i++].delay);
}
doNext();
}
changeColors([{color : "gold", delay : 2000},
{color : "red", delay : 4000}],
3);
You can add as many colours as you like, each with their own delay, by adding more elements to the array you pass to changeColors(). The function will go through the colours in turn, and do the whole sequence the number of times specified in the repeats parameter.
Demo: http://jsfiddle.net/nnnnnn/6WE6s/10/
Here's my effort - no jQuery required:
function colorCycle(el, count, cols) {
var i = 0,
n = cols.length;
// allow this to work on any element given its ID
el = (typeof el === "string") ? document.getElementById(el) : el;
if (n === 0) {
return; // no colours?
} else if (n === 1) {
count = 1; // don't trigger any timers if there's only one colour
}
// all of the hard work is done here
(function repeat() {
var interval = cols[i][1];
el.style.backgroundColor = cols[i][0];
// only do the whole cycle "count" times - 0 = forever
if (++i === n) {
if (count && !--count) {
return;
}
i = 0;
}
setTimeout(repeat, interval); // call myself
})(); // IIFE starts the cycle straight away
};
colorCycle(document.body, 5, [
['red', 1000],
['gold', 500]]);
See http://jsfiddle.net/alnitak/42PeT/
Abstain from using setInterval. Reference here.
EDIT: I've missed the different delay in calls.
var colors = ["#FF0000", "#00FF00", "#0000FF"];
var times = [1000, 2000, 3000];
var backgroundColor = "";
var counter = 0;
var changeBackground = function () {
// if we ran out of colors — do nothing: this simply goes out
// of the function, without continually calling setTimeout.
if (counter >= colors.length)
return;
// you fetch your new color here and increase the counter
// The counter keeps count of how many animations you've done.
backgroundColor = colors[counter];
// increase the counter to point to the next index of colors
// array you'll use in a subsequent call
counter++;
// do your magic voodoo change background animation here.
// I'm just doing a console.log() to be sure this works.
// Your question was framework agnostic, the answer should be too.
console.log(backgroundColor);
// setInterval to repeat
window.setTimeout(changeBackground, times[counter]);
}
window.setTimeout(changeBackground, times[counter]);
try this
var colors = [];
colors.push({color:"gold", time:4000}); //4000 X length of time
colors.push({color:"red", time:2000}); //2000 Y length of time
var numberofTimes = 50; //50 Z number of times
var $body;
var times = 0; // counter for tracking
var currentColor = {}; //currentColor info can be used to get the current
$(function(){
$body = $('body');
changeBG();
});
function changeBG()
{
currentColor = colors[times % colors.length];
$body.css('background-color',currentColor.color);
times++;
if(times<numberofTimes)
setTimeout(changeBG, currentColor.time);
}
check this quick DEMO
A basic example iterating an array of color and time arrays with setTimeout.
(function() {
var i = 0,
colorsTimes = [['gold', 'red', 'gold', 'red', 'gold'],
[2000, 4000, 2000, 4000, 2000]];
function switchColors() {
setTimeout(function() {
$('body').css('background-color', colorsTimes[0][i]);
if (++i < colorsTimes[0].length) switchColors();
}, colorsTimes[1][i]);
}
switchColors();
}());
Fiddle
Using setTimeout:
var doCount = (function() {
var count = 0;
var interval;
var limit = 5; // default
return function(num) {
limit = num || limit;
if (count < limit) {
count++;
console.log('running number ' + count);
interval = setTimeout(arguments.callee, 1000);
} else {
interval && clearTimeout(interval);
}
}
}())
Using setInterval:
var doCount = (function() {
var count = 0;
var interval;
var limit = 5; // default
return function(num) {
limit = num || limit;
if (interval) {
if (++count >= limit) {
interval && clearInterval(interval);
}
console.log('running number ' + count);
} else {
interval = setInterval(arguments.callee, 1000);
}
}
}())
The advantage of setTimeout is that you can adjust the time between runs to make it more regular, setInterval just tries to run as regularly as it can.
My aim is to create identify a piece of code that increments a number by 1, every 1 second:
We shall call our base number indexVariable, I then want to: indexVariable = indexVariable + 1 every 1 second; until my indexVariable has reached 360 - then I wish it to reset to 1 and carry out the loop again.
How would this be possible in Javascript? - if it makes a difference I am using the Raphael framework.
I have carried out research of JavaScript timing events and the Raphael delay function - but these do not seem to be the answer - can anyone assist?
You can use setInterval() for that reason.
var i = 1;
var interval = setInterval( increment, 1000);
function increment(){
i = i % 360 + 1;
}
edit: the code for your your followup-question:
var interval = setInterval( rotate, 1000);
function rotate(){
percentArrow.rotate(1,150,150);
}
I'm not entirely sure, how your rotate works, but you may have to store the degrees in a var and increment those var too like in the example above.
var indexVariable = 0;
setInterval(function () {
indexVariable = ++indexVariable % 360 + 1; // SET { 1-360 }
}, 1000);
Try:
var indexVariable = 0;
setInterval(
function () {
indexVariable = (indexVariable + 1) % 361;
}, 1000}
I have three yellow bars and each of them needs to come from left to right. For that, I have produced this code, but it only works on the last one. Can anyone correct this code; I need to work with pure JavaScript. I am not using any framework. Thanks.
window.onload = function(){
var yellowTitles = document.getElementById('magazine-brief').getElementsByTagName('h2');
for(i=0; i< yellowTitles.length; i++) {
var header = yellowTitles[i];
var timer = i*500;
var yellowBar = setTimeout(animeYellowBar,timer);
function animeYellowBar(){
header.style.left= "0";
}
}
}
Here's how I'd solve the problem:
var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');
// this will force the header number to be bound correctly
// also animates the div across the page by tracking the current position of x
function createMotion(num){
var currPos = 0;//current x position
var delta = 10;//move by this amount
setInterval(function(){
currPos += delta
yellows[num].style.left = currPos;
}, num * 500);
}
for (var i = 1; i < yellows.length; i++)
{
createMotion(i);
}
Note the function "createMotion" - added so the number "i" is correctly reference in the setInterval function.
Shouldn't you be incrementing your CSS left value instead of just setting it to 0? Why have a timeout at all if you're just going to set the value without gradually incrementing or decrementing?
If you do actually want to use a gradual animation, look at this tutorial : http://www.schillmania.com/content/projects/javascript-animation-1/
Very descriptive and possibly what you want.
By the time your timeout function runs, header refers to your last h2.
Try editing your timeout function to this:
function animeYellowBar(){
var thisheader=header;
thisheader.style.left= "0";
}
var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');
for (var i = 0; i < yellows.length; i++)
{
(function(idx, el){
window.setTimeout(function(){
var interval = window.setInterval(function(){
el.style.left = parseInt(el.style.left) + 10; // adjust this movement step
if (parseInt(el.style.left) >= 0)
{
el.style.left = 0;
window.clearInterval(interval);
}
}, 100); // adjust this number for animation speed
}, (idx++) * 500);
})(i, yellows[i]);
}