CODEWITHSUNDEEP
javascript
osbt
osbt

Reputation: 131

Countdown using javascript

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

Upvotes: 2

Views: 539

Answers (5)

Joseph Myers
Joseph Myers

Reputation: 6552

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,
});

Upvotes: 2

user2119554
user2119554

Reputation: 320

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++;
}
}

Upvotes: 0

Parthik Gosar
Parthik Gosar

Reputation: 11646

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");
       }
    }
});

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129832

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.

Upvotes: 0

Joel Martinez
Joel Martinez

Reputation: 47809

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

Upvotes: 0

Related Questions