top of page

Published: January 22, 2020

Updated: January 22, 2020

0

313

How to Add a Custom Countdown Clock to Your Wix Website - Wix Code Tutorial 2020

Category(s)

-Side Menu-
Category

Title

Want to know in-depth details on how you can spice up and customize your COUNTDOWN TIMER by using Wix Code a.k.a. Corvid??


Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!


📚 WHAT WAS COVERED:

Add Elements to Editor

Create and Code the Timer Function

Add Finish Element to Editor

Save and Preview Results in Preview Mode

 

Code Snippet to follow along with the video:


Page Code


This loads the page code

$w.onReady(function () {

    $w("#group1").collapse()
    countdownTimer()

});


Get countdownTimer function and get the current date.


async function countdownTimer() {
 let date = await new Date("Mar 17, 2021 12:30:00").getTime();

 let downTime = setInterval(function () {
 let nowtime = new Date().getTime();
 let diff = date - nowtime;
 let days = Math.floor(diff / (1000 * 60 * 60 * 24));
 let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
 let seconds = Math.floor((diff % (1000 * 60)) / 1000);

        $w("#days").text = days.toString();
        $w("#hours").text = hours.toString();
        $w("#minutes").text = minutes.toString();
        $w("#seconds").text = seconds.toString();
        $w("#group1").expand();
        $w("#box13").collapse();

 if (diff > 0) {
 //continue the timer
        } else {
            clearInterval(downTime);
            $w("#box13").expand();
            $w("#group1").collapse();
        }

    }, 1000)
}

 

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE
Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!


Komentarze


SIGN UP

Get notified of upcoming articles.

Get Started
View More Categories
Images
Animations
Recent Post

Haga clic aquí para agregar su

propio contenido, o conectarse.

creativelynino_00001.png
YouTube

Haga clic aquí para agregar su

propio contenido, o conectarse.

creativelynino_00001.png
YouTube

Haga clic aquí para agregar su

propio contenido, o conectarse.

creativelynino_00001.png
YouTube

Haga clic aquí para agregar su

propio contenido, o conectarse.

creativelynino_00001.png
YouTube

Did this help?

Yes
No

Thanks, we'll pass on your feedback to improve our services.

Survey
Contact
Feedback

TAKE THE SURVEY

We would love to hear from you.  We strive to create content that is valuable to all persons with and without coding experience.  Please fill out this anonymous survey about your Corvid learning experience.
GET STARTED
bottom of page