How to make a Countdown Counter in QC using Javascript

mehran's picture

Hi everyone,

I am trying to make a countdown counter in order to show when a specific video will finish. The input values usually enter manually. For example for a specific QC file I enter two inputs for minutes and seconds and then I want to show the countdown counter animation.

I put together a Jsscript but for some reason it doesn't work at all. This is first time I am using JS in QC. Any help or tips would be really appreciated.

Thank you,

Here is the code:

var mins;
var secs;
var result = new Object();
 
 
 
 
function cd() {
    mins = 1 * m("10"); // change minutes here
    secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
    redo();
}
 
function m(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(0, i));
}
 
function s(obj) {
    for(var i = 0; i < obj.length; i++) {
        if(obj.substring(i, i + 1) == ":")
        break;
    }
    return(obj.substring(i + 1, obj.length));
}
 
function dis(mins,secs) {
    var disp;
    if(mins <= 9) {
        disp = " 0";
    } else {
        disp = " ";
    }
    disp += mins + ":";
    if(secs <= 9) {
        disp += "0" + secs;
    } else {
        disp += secs;
    }
    return(disp);
}
 
function redo() {
    secs--;
    if(secs == -1) {
        secs = 59;
        mins--;
    }
    result.timeLeft = dis(mins,secs); // setup additional displays here.
    return result;
 
 
    if((mins == 0) && (secs == 0)) {
        // Show is finished
 
    } else {
       cd = setTimeout("redo()",1000);
    }
}
function init() {
  cd();
}
 
 
 
function (__number timeLeft) main(){
 
init();
 
 
}
 
 
 
 [javascript]
PreviewAttachmentSize
countdown_timer_javascript_v1.qtz3.27 KB

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

fsk's picture
Re: How to make a Countdown Counter in QC using Javascript

don't know about the javascript but here is a simple composition that does what you describe without code:).

PreviewAttachmentSize
countdown.qtz2.67 KB

usefuldesign.au's picture
Re: How to make a Countdown Counter in QC using Javascript

Yeah I wouldn't use JS for this either, but seeing as you asked for it here 't is. This one has a clock image too ;)

You could try using the Javascript Date() object and even use .setTime or whatever but I find the Date object very confusing so I just divided by 60 to get minutes.

PreviewAttachmentSize
setMinutes.qtz14.17 KB

mehran's picture
Re: How to make a Countdown Counter in QC using Javascript

Thank you so much for quick reply. Regarding the non JS solution, I don't know how to format the counter to just display minutes and seconds. I didn't know about String Timecode patch, which is very useful but don't know how to format that string. I need to do some research.

The sample code by usefuldesign.au was really cool and I found the issue with my code.

Cheers

mehran's picture
Re: How to make a Countdown Counter in QC using Javascript

I found the solution for truncating the time code. Thanks guys for your help.

PreviewAttachmentSize
countdown_01.qtz3.76 KB

usefuldesign.au's picture
Re: How to make a Countdown Counter in QC using Javascript

Thks, mehran.

Glad it proved useful.