4 Replies Latest reply on Jan 25, 2016 2:33 AM by joel_pau

    Text field count from 20:00 to 00:00

    Thomas83

      Hi

       

      I want to make a text field that count down from 20:00 (mins) to 00:00. Can someone help me?

      I have succeded to count up with the code below.

       

      secs = 00;

       

       

      mins = 00;

       

       

      hours = 00;

       

       

      sym.$('secs').html(secs);

       

       

      sym.$('mins').html(mins);

       

       

      sym.$('hours').html(hours);

       

       

      var t = setInterval(function(){myCounter()}, 1000);

       

       

      function myCounter() {

       

       

        secs++;

       

       

        sym.$('secs').html(secs);

       

       

        sym.$('mins').html(mins);

       

       

        sym.$('hours').html(hours);

       

       

        if(secs==59){

       

       

        secs = -01;

       

       

        mins++;

       

       

        }

       

       

        if(mins==9){

       

       

        //secs = 59;

       

       

        mins = 0;

       

       

        hours++;

       

       

        }

       

       

        if ( hours == 3){

       

       

        clearInterval(t);

       

       

        secs = 0;

       

       

        mins = 0;

       

       

        hours =3;

       

       

        sym.$('secs').html(secs);

       

       

        sym.$('mins').html(mins);

       

       

        sym.$('hours').html(hours);

       

       

        }

       

       

      }

        • 1. Re: Text field count from 20:00 to 00:00
          joel_pau Level 5

          Here is an attempt ==> countDown.zip - Box


          var duration = 60*20, minutes, seconds;

          var startTimer = function () {

          minutes = parseInt(duration / 60, 10);

          seconds = parseInt(duration % 60, 10);

           

          minutes = minutes < 10 ? "0" + minutes : minutes;

          seconds = seconds < 10 ? "0" + seconds : seconds;

           

          sym.$("min").html(minutes);

          sym.$("sec").html(seconds);

           

          var countdown = setTimeout(startTimer, 1000);

          if (--duration < 0) { clearInterval(countdown); };

          };

           

          startTimer();

          • 2. Re: Text field count from 20:00 to 00:00
            Thomas83 Level 1

            Thank you soo much Joel. You made my day!

             

            One question, if i put mins and secs in a symbol, what do I need to change in the code?

             

            Best regards

            Thomas

            • 3. Re: Text field count from 20:00 to 00:00
              joel_pau Level 5

              Well, 2 ideas:

               

              1) With your symbol, you create a creationComplete panel using the user interface (the button "+"). Then, you copy and paste the countdown code.

               

              2) You don't move the code and you just change these lines:

              sym.getSymbol("symbolName").$("min").html(minutes);

              sym.getSymbol("symbolName").$("sec").html(seconds);

              • 4. Re: Text field count from 20:00 to 00:00
                joel_pau Level 5

                A better code and a new demo.


                 

                • Code:

                var countdown, duration = 60*20, minutes, seconds,

                  startTimer = function () {

                  minutes = parseInt(duration / 60, 10);

                  seconds = parseInt(duration % 60, 10);

                 

                  minutes = minutes < 10 ? "0" + minutes : minutes;

                  seconds = seconds < 10 ? "0" + seconds : seconds;

                 

                  sym.$("min").text(minutes);

                  sym.$("sec").text(seconds);

                 

                  countdown = setTimeout(startTimer, 1000);

                  if (--duration < 0) { clearTimeout(countdown); };

                  };

                 

                startTimer();

                 

                Note:

                Here duration is twenty minutes because: duration = 60*20.

                So, if you want 5 minutes: duration = 60*5