Custom timer

How to show a 2 min timer on a page after which it be redirected to a page.
Note:- I also want the user to see the timer.

1 Like

See the Countdown example. That should get you started.

Cant understand a bit… Please explain.

If you want Yisrael’s assistance, you have to earn it :wink:
Can’t be lazy and you have to be very specific.

GTS - google that shit, read up and play with the code until you understand it.
It’s fun, and Corvid/Wix makes it easy.

Window setInterval() Method

JavaScript Timing Events

Then you can do fun stuff like this:
https://www.ualmatrix.com/test

Once you have your JS timers and functions set, you direct to a new page with this:

wixLocation.to("/login")

Cheers.

I am not a programmer, the reason why I chose wix. So I need your help. And Yisrael’s site is showing error whenever I click on load template.
I want a timer to count down and show up to 2 mins in the text box. and redirect to a page automatically.


Now for redirection I was trying to write a code but how to implement timer with this?

import wixLocation from 'wix-location';

$w.onReady(function () {
    setTimeout(() => {
        wixLocation.to("/quizmain/{ID}");
    }, 180000);
});

Here’s a link to the template so you can open directly in the Editor.

@yisrael-wix I just checked your countdown example. I even increased the time delay. But the main thing is that you have not shown timer countdown to zero.


You check my previous comment , then you will understand my problem.

@mayukhsroy The example demonstrates countdown to zero. When the count reaches zero, it displays a picture on the screen and clears the timer so it won’t keep counting down.

You say that you are not a programmer, so the code might be a little challenging for you. I would recommend playing with the code and searching the Internet for help with Javascript.

Good luck

@yisrael-wix Thanks mate but the fact is that. On previewing I cannot see the timer(look at screenshot 1). Anyway, I am trying this to implement in my site. Hoping for a positive outcome

@mayukhsroy Look at the date/time that’s set in code. My “not-Retirement party” was on Feb 17, so you won’t see any countdown since the time has passed.

You can modify the code to take current time and add two minutes. Then you can countdown from there.

@yisrael-wix Phew! Now I get it. But my problem is different. In the example you did, suppose, if I open the page in morning, the timer countdown would be different than the one shown when i open it in the evening. Isn’t that so? I want to make it constant.

@mayukhsroy In your case, you don’t want to set a date like I did. Rather, get the current date, add two minutes, and then do the countdown to that time - that is, do a countdown from the current time for two minutes.

@yisrael-wix

 
let now = new Date().toLocaleTimeString();
let diff = 2*60*1000;

Now how to add them. Do I need to fetch minutes and add 2 ? Should I convert 2 to milliseconds?

Example here .

Code:

import wixLocation from 'wix-location';

var timerLengthSeconds = 0;
var timerLengthMinutes = 0;
var countDownSeconds = 0;
var countDownMinutes = 0;

var myVar = 0;

$w.onReady(function () {
    $w('#inputSeconds').value = "10";               // initial value for input box
});

function timer()
{
    countDownSeconds --;
    countDownMinutes = (countDownSeconds / 60);

 if ( countDownSeconds === 0) {
        myStopFunction();                                               // finished
        launch();                                                       // desired action: launch rocket
        // wixLocation.to("/my_page");                                  // desired action: redirect
    }                               
    $w('#textCountdown').text = "" + countDownSeconds;
    $w('#textMinutes').text = "" + Math.trunc( countDownMinutes ) ;     // cut off decimals (no rounding)
    $w('#textSeconds').text = "" + (countDownSeconds % 60);             // % = modulo
    // (countDownSeconds % 60) which means:(countDownSeconds / 60) modulo(remainder)
}
function myStopFunction() {
    clearInterval(myVar);                   // end countdown timer
    timerLengthSeconds = 0;                 // reset vars
    timerLengthMinutes = 0;
    countDownSeconds = 0;
    countDownMinutes = 0;
}

export function buttonStart_click(event) {
    myStopFunction()                        // stop any ongoing timers
    timerLengthSeconds = Number($w('#inputSeconds').value);
    timerLengthMinutes = timerLengthSeconds / 60;
    countDownSeconds = timerLengthSeconds
    countDownMinutes = timerLengthMinutes;

    myVar = setInterval(timer, 1000);       // start countdown timer, update clock every second
}
export function inputSeconds_keyPress(event) {          // accept "enter" key input
 // console.log("You pressed" + event.key);
 if (event.key === "Enter") {
        buttonStart_click();
    }
}

function launch() {
    $w("#videoPlayer1").seek(95);                       // start time in seconds
    $w("#videoPlayer1").play();
    $w('#videoPlayer1').show('fade');
 
    myVar = setInterval(endlaunchanimation, 8000);      // begin end timer for rocket launch video
}
function endlaunchanimation (){
    myStopFunction();                                   // stops any timers "myVar"
    $w('#videoPlayer1').hide('fade');

    myVar = setInterval(fadeVideoAnimation, 3000);      // end timer for rocket launch video after the
                                                        // $w('#videoPlayer1').hide('fade');
 // cleaner fade ... video paused 3 seconds (3000 ms) after "fade" command.
}

function fadeVideoAnimation() {
    myStopFunction();                                   // stops any timers "myVar"
    $w("#videoPlayer1").pause();                        // only pause after video faded.
}

You’re welcome.

Hey @brainstorrrm - awesome example!

@yisrael-wix @brainstorrrm Thanks to you both. Everything is working smooth. Thanks a lot.

@Yisrael.
Thanks, “not retired,” moderator/educator/Wix cheerleader dude - took a bit longer than expected. Unnecessarily got distracted with “epoch” when it’s not required for this mission.
JS setInterval() is one of the most straight-forward components ever.
Only one ( global ) var for setInterval() was required in this simple example - just recycled the same timer for every task.

Added three lines for a clean video fade .
Added Corvid credit and links to my TOTP proof of concept.
A little “thank you” for the epic (education) value provided by Wix/Corvid … now, if we could just grow out of beta for a while … and provide better than lousy bot support for paying users, a lot of fans would be in web coding nirvana.

But nirvana won’t happen for this user until Wix/Corvid addresses my #1 through #10 issue:

“Adjustable timeout for backend functions.”

For some nerds and select projects, 14 seconds won’t cut it.

The little countdown project was a fun puzzle - thanks, Mayukh & gang.

… oh, and please fix those lightboxes , pronto.
Thanks.

Scheduled jobs and adjustable backend timeouts are in the pipeline. No ETA but I believe it should be fairly soon.