top of page
Crumpled Fabric

1

Add Countdown Timer to WIX

Click URL to copy

Dec 19, 2021

2 min read

WIX Ideas

Tags: Digital clock Count up Timer Count Down Timer JavaScript

Hi there👋 Adding a Stopwatch to your WIX website was discussed in our previous tutorial. In this tutorial, however, we will learn how to add a Countdown timer. So let's say you want to display a specific time for your WIX users, maybe a countdown to the end of a promo or reservation, then this is the tutorial for you.



Initiating Countdown with onChange function

The image above displays the set of code that lets us initiate the functions that tells our main countdown function to remember the date and time values selected for our countdown target, which is displayed below ;

//MAIN TIMER FUNCTION ⚡
function updateTimer() {

    let countDownDay = Date.parse(`${dateSelected()} ${timeSelected()}`);
    let now = Number(new Date());
    let date = countDownDay - now;

    let days = Math.floor(date / (1000 * 60 * 60 * 24));
    let hours = Math.floor(date / (1000 * 60 * 60));
    let mins = Math.floor(date / (1000 * 60));
    let secs = Math.floor(date / 1000);

    let dayDisplay = checkTimerZeros((days).toLocaleString());
    let hourDisplay = checkTimerZeros((hours - days * 24).toLocaleString());
    let minuteDisplay = checkTimerZeros((mins - hours * 60).toLocaleString());
    let secondsDisplay = checkTimerZeros((secs - mins * 60).toLocaleString());

    //ADD FOR VALID TIME
    if (date > 0) {
        $w("#day").text = dayDisplay;
        $w("#hour").text = hourDisplay;
        $w("#minute").text = minuteDisplay;
        $w("#second").text = secondsDisplay;

        $w("#discountText").hide();
        $w("#box5, #box6, #box7, #box8").style.backgroundColor = "rgba(10, 10, 10, 0.80)";
        // $w("#countDownTimer").show()

        //SET COUNTDOWN TO DEFAULT IF THE TIME IS REACHED😍// ADD FOR INVALID TIME
    } else if (date < 0) {
        $w("#day").text = "00";
        $w("#hour").text = "00";
        $w("#minute").text = "00";
        $w("#second").text = "00";

        $w("#discountText").show();
        $w("#box5, #box6, #box7, #box8").style.backgroundColor = "rgba(245, 49, 49)";
        // $w("#countDownTimer").hide()
    }

}

The code below shows us the functions to get our date and time when selected from our date picker and time picker





🚀Please, scroll down to copy the code🚀


Code



Leave a comment (0)

Thanks for leaving a comment🎉

RELATED TUTORIALS 🚀

Tabbed Navigation using Wix Menu

Tabbed Navigation using Wix Menu

Easily change tabs on your tab element using Wix menu

bottom of page