How to create countdowns
PROJECTS USED
TAGS
SUITABLE FOR
Editor X
ABOUT
Working with time-sensitive events or just want to create a sense of urgency? Learn how to add a countdown timer to your Wix site.
Layout
01. Add a text title and number and adjust the style
02. Stack the text elements and set the width to "max-content"
03. Place the stacked elements in a container
04. Set the position and docking of the container
05. Add a 4-column grid to the container
06. Duplicate the stack and place it in grid cells
07. Set the position of the stacks
08. Change the titles accordingly
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Velo
01. Turn on Dev Mode
02. Add an element ID to the container
03. Add an element ID for each number according to the title
04. Paste the “countDownDate” variable
05. Update the event date and time (make sure the timezone is correct)
06. Paste the countdown functions
07. Update the element IDs
const countdownDate = new Date("Mar 30, 2023 10:00:00 GMT+02:00").getTime();
$w.onReady(function () {
startCountDown();
});
// COUNTDOWN - Set the date we're counting down to
function startCountDown() {
// set the clock for the first time
getDistanceOfTimer();
//show the clock
$w('#countdownContainer').show();
// Update the count down every 1 second
setInterval(function () {
getDistanceOfTimer();
}, 1000);
}
function getDistanceOfTimer() {
// Get today's date and time
const now = new Date().getTime();
// Find the distance between now and the count down date
const distance = countdownDate - now;
// Time calculations for days, hours, minutes and seconds
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
console.log(seconds);
$w('#days').text = ('0' + days.toString()).slice(-2);
$w('#hours').text = ('0' + hours.toString()).slice(-2);
$w('#minutes').text = ('0' + minutes.toString()).slice(-2);
$w('#seconds').text = ('0' + seconds.toString()).slice(-2);
}
