Crumpled Fabric

0

Add Countdown Timer to WIX

Click URL to copy

Dec 19, 2021

2 min read

WIX Ideas Team

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

WRITE A COMMENT

Thanks for leaving a comment🎉

Walter

Walter

8/8/22

More Details? Watch video

Hi, you can click here to watch the video https://www.youtube.com/watch?v=9bx7-nBeZ5c

Walter

Walter

7/11/22

For you

Walter Odibi

Walter Odibi

4/18/22

Awesome Feature

This tutorial shows you how to display views on your Wix repeater.

📺WATCH VIDEO HERE https://www.youtube.com/watch?v=Iz7SdaCSdXg

Walter Odibi

Walter Odibi

4/18/22

Amazing tutorial

This amazing tutorial will show you how to a comment section to your WIX dynamic page.

📺WATCH VIDEO HERE https://www.youtube.com/watch?v=f8-vJQFNZ_c

Walter Odibi

Walter Odibi

4/10/22

Great Feature🎉

This amazing tutorial will show you how to add a visitor view counter to your WIX dynamic page.

🚩MORE TUTORIALS https://www.wixgenius.com/wix-tutorials

LOAD MORE 🎉

RELATED TUTORIALS 🚀

Load More Pagination Interaction

Load More Pagination Interaction

Adding a Custom Contact Form in WIX + Email Notification

Adding a Custom Contact Form in WIX + Email Notification

Add your custom contact form to your website with email automation.

Sort by Most Popular

Sort by Most Popular

Sort your repeater by the highest number of people who viewed your dynamic item.