Countdown using javascript

Question

I'm trying to create a countdown for a quiz I created. The quiz will create a percentage and I am trying to create a JavaScript function that will count down from 100% to the users quiz score percentage.

Also is it possible to change the color of the percentage while it's counting down? Example 100% Green and it starts to fade to red when it hits 59% and below?

What I am working with now:

<div id="counter">
</div>

var stop = 6;

for(i=1; i <= 100; i++) {
    $('#counter').append('<p>' + i + '%');
}

$('#counter').cycle({
    delay: 600,
    fx:     'none',
    backwards: true,
    speed: 300,
    timeout:  60, 
    autostop: 1,
    autostopCount: stop,
});

Link:http://jsfiddle.net/joshsmith/WE3UA/4/

Thank You

Joseph Myers · Accepted Answer · 2013-03-27 15:42:10Z

2

This will make it change from pure green at 100% to pure red at 50%. I'm not sure if you wanted it to stay green all the way down to 60%. If you want that, then just put a ternary statement into the green function like this "return i > 60 ? 255 : Math.round(256*(i+40)/50-256)"

var stop = 60;
function green(i) { return Math.round(256*i/50-256); }
function red(i) { return 256-green(i); }
function toHex(c) { var h = c.toString(16); return h.length > 1 ? h : '0'+h; }
function color(i) { return i <= 50 ? 'f00' : toHex(red(i)) + toHex(green(i)) + '00'; }

for(i=1; i <= 100; i++) {
    $('#counter').append('<p style="color: #' + color(i-1) + '">' + i + '%');
}

$('#counter').cycle({
    delay: 600,
    fx:     'none',
    backwards: true,
    speed: 300,
    timeout:  60, 
    autostop: 1,
    autostopCount: stop,
});

edited Mar 27, 2013 at 15:42

answered Mar 27, 2013 at 15:36

Joseph Myers

6,56229 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joel Martinez · Accepted Answer · 2013-03-27 15:17:08Z

0

Looks like you'e already doing a pretty good job on the countdown itself.

You can easily animate colors using something like this jQuery color plugin:
https://github.com/jquery/jquery-color

answered Mar 27, 2013 at 15:17

Joel Martinez

47.9k26 gold badges136 silver badges186 bronze badges

Comments

David Hedlund · Accepted Answer · 2013-03-27 15:18:48Z

0

Since your cycle plugin just iterates through a lot of elements that have already been created, you can simply set the paragraphs for valeus below 59 to whatever value you want.

answered Mar 27, 2013 at 15:18

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Comments

Parthik Gosar · Accepted Answer · 2013-03-27 15:24:26Z

0

You get a after event which gets fired after every tick. You could use that to change the color of your text.

var stop = 6;

for(i=1; i <= 100; i++) {
    $('#counter').append('<p>' + i + '%');
}
var nCounter = 0;
$('#counter').cycle({
    delay: 600,
    fx:     'none',
    backwards: true,
    speed: 300,
    timeout:  60, 
    autostop: 1,
    autostopCount: stop,
    after: function(currSlideElement, nextSlideElement, options, forwardFlag)
    {
       nCounter++
       var percent = nCounter /stop * 100;
       if(percent  < 10)
       {
           $('#counter').css("color", "red");
       }
    }
});

answered Mar 27, 2013 at 15:24

Parthik Gosar

11.7k3 gold badges27 silver badges16 bronze badges

Comments

user2119554 · Accepted Answer · 2013-03-27 15:32:27Z

0

U Just Need to Make Increment In RGB Values According to User Progress.

Try it out :)
var c1=c2=c3=0;
for(i=1; i <= 100; i++)
{
document.getElementById("#counter").style.color=rgb(c1,c2,c3);
if(i>30 && i<60)
{
c2++;
}
}

answered Mar 27, 2013 at 15:32

user2119554

3201 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Countdown using javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related