Scribd
Upload
156 views2 pages

Countdown Timer Codes - Free From InsideTheSquare - Co

This document provides code for adding countdown timers to a Squarespace site in either a single line or double line format. The single line code displays the countdown on one line, while the double line code separates the numbers from labels onto different lines. Both codes need to be customized by changing the target date/time. The document also includes a disclaimer that it is not affiliated with Squarespace.

Uploaded by

BALLB BATCH-1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
156 views2 pages

Countdown Timer Codes - Free From InsideTheSquare - Co

This document provides code for adding countdown timers to a Squarespace site in either a single line or double line format. The single line code displays the countdown on one line, while the double line code separates the numbers from labels onto different lines. Both codes need to be customized by changing the target date/time. The document also includes a disclaimer that it is not affiliated with Squarespace.

Uploaded by

BALLB BATCH-1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

countdown timer

codes cheat sheet


CUSTOM CODES

SINGLE LINE TIMER


The following code will create a countdown timer in a single line on your
Squarespace site. Be sure to change the highlighted parts of this code to
countdown to the right date and time, and display something unique when
time's up!

<center><h2 id="timer"></h2></center><script>var countDownDate = new


Date("Jan 1, 2021 13:13:13").getTime();var x = setInterval(function() {var now = new
Date().getTime();var distance = countDownDate - now;var days =
Math.floor(distance / (1000 * 60 * 60 * 24));var hours = Math.floor((distance % (1000
* 60 * 60 * 24)) / (1000 * 60 * 60));var minutes = Math.floor((distance % (1000 * 60 *
60)) / (1000 * 60));var seconds = Math.floor((distance % (1000 * 60)) /
1000);document.getElementById("timer").innerHTML = days + "d " + hours + "h "+
minutes + "m " + seconds + "s ";if (distance < 0)
{clearInterval(x);document.getElementById("timer").innerHTML = "Hint: change
this to whatever you want to say when the timer is up!";} }, 1000); </script>

DOUBLE LINE TIMER


This code will put your labels on a separate line from the numbers in your
countdown timer. Change the date and time highlighted in this code so you are
counting down to the right one, and play around with the HEX color code if you
want it to match your own websites color scheme.

<style>#countdown{color:#fff;display:inline-block;text-align:center;font-
size:1.5rem} #countdown>div{padding:10px; background:#50bdb8;
display:inline-block} #countdown div>span{padding:5px; display:inline-block}
</style><center><div id="countdown"><div><span class="days" id="day">
</span><div class="text">Days</div></div><div><span class="hours" id="hour">
</span><div class="text">Hours</div></div><div><span class="minutes"
id="minute"></span><div class="text">Minutes</div></div><div><span
class="seconds" id="second"></span><div class="text">Seconds</div></div>
</div><p id="timer"></p></center><script>var deadline=new Date("jan 1, 2020
15:37:25").getTime();var x=setInterval(function(){var now=new
Date().getTime();var t=deadline-now;var days=Math.floor(t/(1000*60*60*24));var
hours=Math.floor((t%(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((t%
(1000*60*60))/(1000*60));var seconds=Math.floor((t%
(1000*60))/1000);document.getElementById("day").innerHTML=days;document.
getElementById("hour").innerHTML=hours;document.getElementById("minute
").innerHTML=minutes;document.getElementById("second").innerHTML=secon
ds;if(t<0){clearInterval(x);document.getElementById("timer").innerHTML="TIME
UP";document.getElementById("day").innerHTML='0';document.getElementBy
Id("hour").innerHTML='0';document.getElementById("minute").innerHTML='0';d
ocument.getElementById("second").innerHTML='0'}},1000);</script>
LEARN MORE CODES FOR SQUARESPACE AT INSIDETHESQUARE.CO
DISCLAIMER:  THE TERM "SQUARESPACE" IS A TRADEMARK OF SQUARESPACE, INC. I AM NOT AFFILIATED WITH SQUARESPACE, INC.  I JUST REALLY LOVE THEIR PLATFORM AND WANT TO HELP OTHERS USE IT!

You might also like