Countdown timer

JavaScript
1

This represents in asp classic the numbers of minutes. For the sake of this example, let use 60 minutes.

<%-DateDiff("n", starttime, now())%>

In asp, I can use this to represent the 60 minutes

<%countdown = -DateDiff("n", starttime, now())%>

…and in the JS I can replace the time like this…

<%=countdown%>

So I am trying to find a countdown timer that I can place this code: <%=countdown%> and have it countdown, 60,59,58,57 etc,

The countdown is also fine in minutes and seconds with the wording “remaining” after the countdown number. And it would be nice to say “finished” once it reaches zero.

Any help would be appreciated.

Thank you!

2

I saw this example from Sitepoint…

How can I convert the below so it brings in minutes only as I had indicated in the previous post?

const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
3

As no one else is around I’ll take a guess I’d say that you would change it here where I’ve put 120.

Date(Date.parse(new Date()) + 120 * 1000);

The 120 is seconds in that example so if you had the time in whole minutes from your backend then I’d guess you need it like this.

Date(Date.parse(new Date()) + <%=countdown%> * 60 * 1000);

Bearing in mind my JS knowledge is pretty basic at best :slight_smile:

4

I took this:

const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

and replaced with this:

Date(Date.parse(new Date()) + 120 * 1000);

…and nothing shows in minutes or seconds

I don’t think so!!!

5

Her’s a screenshot of your codepen with that code added"

Screen Shot 2020-10-17 at 14.42.13
Screen Shot 2020-10-17 at 14.42.131059×725 60.9 KB

Seems to work for me :slight_smile:

2 Likes
6

Sorry for the delayed response. I didn’t get an email on this one.

You are CORRECT! It does work - I had a typo and didn’t catch it.

Now lastly, I am trying to eliminate (because it won’t be used) the Days and Hours to the display. I tried removing that from the div and it then shows no numbers at all and tried removing from the JS and that doesn’t work. What do I need to change to make that happen.

Thanks

7

If you remove the references to hours and days from the js and the hours and days html it should do what you want.

function getTimeRemaining(endtime) {
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor((total / 1000) % 60);
  const minutes = Math.floor((total / 1000 / 60) % 60);

  return {
    total,
    minutes,
    seconds
  };
}

function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const minutesSpan = clock.querySelector(".minutes");
  const secondsSpan = clock.querySelector(".seconds");

  function updateClock() {
    const t = getTimeRemaining(endtime);
    minutesSpan.innerHTML = ("0" + t.minutes).slice(-2);
    secondsSpan.innerHTML = ("0" + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }
  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

const deadline = new Date(Date.parse(new Date()) + 120 * 1000);
initializeClock("clockdiv", deadline);

<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

Screenshot:

Screen Shot 2020-10-17 at 19.43.26
Screen Shot 2020-10-17 at 19.43.261349×1161 179 KB

1 Like
8

Thank you so much Paul. I see what you had to remove to make it work. I really appreciate it.

1 Like
9

Paul,

This edited version doesn’t stop, like the other one did, at zero-zero. Does that function get lost by deleting the days and hours?

Thanks!

edit: or even better - when reaching zero zero, can a link appear? And even better, can a link appear and the timer go away?

10

Just out of curiosity I tested it, in chrome, edge and firefox and it works for me, stopping at 00 00 with no errors

Furthermore if you amend getTimeRemaining’s return to a pre ES6

return {
  total: total,
  minutes: minutes,
  seconds: seconds
}

It works in ie11 as well.

Maybe worth checking you have copied Paul’s script correctly?

Will back away now, over to PaulOB :slight_smile:

2 Likes
11

Well, I appreciate you trying it. I tried it a couple of times and it recycled, however, I will check again. I am using EDGE for my trials. I will also use your code and response to that also.

Thanks

12

Here’s my fork of the codePen code that I made based on the above information. https://codepen.io/pmw57/pen/GRqZVBO

Does mine recycle on you, and if it does, is there any information in the F12 console area of Edge?

1 Like
13

Just getting back to this, and thought of what the problem could be, and fixed and your code is just fine.

The problem was that I was using my localhost which conflicted with the actual time. I did a response.write countdown (asp code) and the minutes were way off. So I upload to actual server for a test and all is good. I know that when @rpg_digital and you said it tested good then the mistake had to be on my end! Actually nothing to fix other than upload to server!

It’s a nice looking timer and as mentioned before, is it easy to code were once it goes zero, then to have the minutes/seconds disappear and provide a link?

Thanks for your help - greatly appreciated.

14

Thank you for that. I do have a few users still on IE11 so that was very helpful.

15

Add what you want to show in an HTML div, I’ve called it clocklink.

<div id="clocklink">
  <p>Follow <a href="https://www.google.com">this link</a>.</p>
</div>

Add a CSS class called hide that we will use to hide things.

.hide {
  display: none;
}

It is better to use JS to hide things, so that when JS isn’t working the information then remains visible and accessible to everyone.

In the JS code hide the clocklink. I put this near the end of the code.

document.querySelector("#clocklink").classList.add("hide");

The clock page now looks the same as it did before, but now it has the link as hidden content on the page.

When the total ends up being zero, that’s when you can toggle the visibility of the clock.

    if (t.total <= 0) {
      clearInterval(timeinterval);
      toggleClock();
    }

I’ve used a separate function to do the job, because that makes it easier to understand what is happening there.

The toggleClick function just hides the clock, and shows the link.

function toggleClock() {
  document.querySelector("#clockdiv").classList.add("hide");
  document.querySelector("#clocklink").classList.remove("hide");  
}

You’ll find the updated code in my codePen at https://codepen.io/pmw57/pen/GRqZVBO

2 Likes
16

Paul,

You’re a brilliant coder!

Thanks, I will put that in use soon. I appreciate it!

1 Like
17

Good work @Paul_Wilkins :slight_smile:

One minor point on the css you are missing the display:inline-block here: :wink:

#clockdiv span {
  padding: 15px;
  border-radius: 3px;
  background: #00816a;
  display:inline-block;
}
2 Likes
18

I am trying to figure out why the earlier versions do not have a shadow effect vs the latest version doesn’t. I prefer no shadow - what do I need to do to change that?

Thanks

no shadow - the one I like
image

shadow
image

19

That’s the inline-block setting I just mentioned above :slight_smile:

20

So explain please - is that just a design look and if I want the other look I just revert back to that?

Thanks