Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Countdown timer code not working - help please?


Go to solution Solved by paul2009,

Recommended Posts

Hello

I have some code for a countdown timer, but it's not working. Could someone please help me work out why?

I'm using a code block with HTML. Photo attached for what it looks like currently - but no numbers!

I'm not a pro web designer, but understand a little about coding.

Thanks in advance for your time!

<style>#countdown{color:#fff;display:inline-block;text-align:center;font-size:1.5rem} #countdown>div{padding:10px; background:#e2dbd6; 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.getEl ementById("hour").innerHTML=hours;document.getElementById("minute").innerHTM L=minutes;document.getElementById("second").innerHTML=seconds;if(t<0) {clearInterval(x);document.getElementById("timer").innerHTML="TIME 
UP";document.getElementById("day").innerHTML='0';document.getElementById("hou r").innerHTML='0';document.getElementById("minute").innerHTML='0';document.get ElementById("second").innerHTML='0'}},1000);</script> 
 

clock.JPG

Link to post
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

You cannot simply duplicate the block of code because each block requires unique variables and IDs. (IDs must be unique on the page.) However: If the timers are counting down to the same po

It appears you solved the issue? I seems to be working here.  

Posted Images

27 minutes ago, DonnaST said:

I have some code...but it's not working. I'm using a code block with HTML.

It's difficult to provide you with specific advice as you haven't provided us with a working link. I recommend that you always provide a link (and a public password if the site isn't live).

However, your screenshot shows the page whilst you are logged in. Please note that code is disabled when you are logged in. To see your code working, open a new private or incognito window in your browser and enter your page’s URL without logging on.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include.
I value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.
Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

Link to post
2 hours ago, paul2009 said:

It's difficult to provide you with specific advice as you haven't provided us with a working link. I recommend that you always provide a link (and a public password if the site isn't live).

However, your screenshot shows the page whilst you are logged in. Please note that code is disabled when you are logged in. To see your code working, open a new private or incognito window in your browser and enter your page’s URL without logging on.

Hi Paul

Thanks for your advice! Here is the link www.themumretreat.co.uk/membership

It's the pink timer I'm having trouble with, the blue one is a back-up for now.

Grateful for any help you can offer!

Link to post

There are two issues.

Firstly, there are errors in your code. When you've copied the code you have introduced some additional spaces and line breaks. For example "getEl ementById" shouldn't have a space and neither should "innerHTM L". Take a look through the code and remove the errors first. 

The second issue is that you should be counting down to the date (in the first line), but right now you've specified a date in the past. 🙂

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include.
I value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.
Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

Link to post
43 minutes ago, paul2009 said:

There are two issues.

Firstly, there are errors in your code. When you've copied the code you have introduced some additional spaces and line breaks. For example "getEl ementById" shouldn't have a space and neither should "innerHTM L". Take a look through the code and remove the errors first. 

The second issue is that you should be counting down to the date (in the first line), but right now you've specified a date in the past. 🙂

Thank you, I really appreciate your help. 

I knew the date wasn't set, but I've done all that you've said, but sadly still not working. I may have to live with the blue one.

Thanks again!

Link to post
36 minutes ago, creedon said:

It appears you solved the issue? I seems to be working here.

 

Screen Shot 2021-03-13 at 1.39.15 PM.png

Hi

Yes I did thank you!!

However, I now have another problem - I want another timer lower down the page, have used exactly the same code, but it's not working. Cannot figure this out, any ideas please? thanks

Link to post

Site URL: https://www.themumretreat.co.uk/membership

Hello

Would love some help please!

I have two countdown timers on the same page. One is working and one is not! Both have exactly the same code. I'm using a code block for each.

Also, I now want to change the HEX colour of the timer background blocks, but it refuses to change. 

Please know I am NOT a coder, but would be so grateful for any help.

Thank you 😃

Link to post
1 hour ago, DonnaST said:

I have two countdown timers on the same page. One is working and one is not! Both have exactly the same code.

You cannot simply duplicate the block of code because each block requires unique variables and IDs. (IDs must be unique on the page.)

However:

  • If the timers are counting down to the same point in time, you can leave the 'deadline' variable the same. You won't need to duplicate this line of code.
  • The classes can remain the same if you want them to have the same colours. You also won't need to duplicate the content that starts with <style> and ends with </style>.

To create the second countdown, make a copy of the working code from the first and then change each variable name (var) and each ID in the HTML and the JavaScript.

For example, the HTML section of the first countdown element starts with:

<div id="countdown">
  <div>
    <span class="days" id="day">
    </span>

In the second countdown, you could add '2' to make the IDs different to the first countdown:

<div id="countdown2">
  <div>
    <span class="days" id="day2">
    </span>

You'll need to do this throughout.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include.
I value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.
Squarespace. I've been a loyal and enthusiastic supporter of the platform since 2007. 

Link to post
6 hours ago, paul2009 said:

You cannot simply duplicate the block of code because each block requires unique variables and IDs. (IDs must be unique on the page.)

However:

  • If the timers are counting down to the same point in time, you can leave the 'deadline' variable the same. You won't need to duplicate this line of code.
  • The classes can remain the same if you want them to have the same colours. You also won't need to duplicate the content that starts with <style> and ends with </style>.

To create the second countdown, make a copy of the working code from the first and then change each variable name (var) and each ID in the HTML and the JavaScript.

For example, the HTML section of the first countdown element starts with:


<div id="countdown">
  <div>
    <span class="days" id="day">
    </span>

In the second countdown, you could add '2' to make the IDs different to the first countdown:


<div id="countdown2">
  <div>
    <span class="days" id="day2">
    </span>

You'll need to do this throughout.

Thank you so much Paul!!

This is really kind of you, I can't thank you enough. It took me a while to figure out what you were saying (not your fault, just a little way over my head) but I got there!!

Thank you so much x

 

 

Link to post
  • 4 weeks later...
On 4/6/2021 at 2:12 PM, ElizabethM said:

Hi everyone, 

 

I'm struggling with this countdown, I think I miss something but I don't know what. 

Could you please help me to fix this ? 

 

Capture d’écran 2021-04-06 à 14.10.19.png

This is the code I used 

<style>#countdown{color:#f5f2ec;display:inline-block;text-align:center;font-size:1.5rem}

#countdown>div{padding:10px; background:#b79b7d; 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">jours</div>

  </div>

  <div>

    <span class="hours" id="hour">

    </span>

    <div

class="text">heures</div>

  </div>

  <div>

    <span class="minutes" id="minute">

    </span>

<div class="text">minutes</div>

  </div>

  </div>

 

  <p id="timer"></p>

</center>

<script>var deadline=new Date("may 1, 2021 18:30").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.getEl

ementById("hour").innerHTML=hours;document.getElementById("minute").innerHTM

L=minutes;document.getElementById("second").innerHTML=seconds;if(t<0)

{clearInterval(x);document.getElementById("timer").innerHTML="TIME

UP";document.getElementById("day").innerHTML='0';document.getElementById("hou

r").innerHTML='0';document.getElementById("minute").innerHTML='0';document.get

ElementById("second").innerHTML='0'}},1000);</script>

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...