7 Replies - 502 Views - Last Post: 31 October 2013 - 07:14 AM

#1 lilygrace  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 103
  • Joined: 17-August 05

Assistance on Countdown code - timer doesn't show

Posted 29 October 2013 - 03:11 PM

Hi guys,

I am not really good in javascript but I'm making a countdown-counter

The counter resets to 24 hours when the UK time strikes 1pm. I made this code so far. Kinda like logic on my brain, along with sample syntax that I researched.

oh this is with PHP.

<span id="countdown"></span>
<script>
// set the date we're counting down to
var current_date = new Date("<?php echo date('M d Y'); ?>").getTime();
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {

	 current_date.setSeconds(current_sec + 1);)/>/>
	 var now = new Date(current_date);
	 
	 var hoursleft = 13 - now.getHours();
	 var minutesleft = 60 - now.getMinutes();
	 var secondsleft = 60 - now.getSeconds();
	 
	 
	if (minutesleft == 60) {
                hoursleft = hoursleft + 1;
                minutesleft = 0;
       }
	
	
	
	countdown.innerHTML = hoursleft + "h, "
			+ minutesleft + "m, " + secondsleft + "s"; 

 
    // find the amount of "seconds" between now and target
    
 
}, 1000);
</script>



I tried to test it but the counter doesn't show when I checked on the browser, and also I don't have an idea where to insert getTimezoneOffset() to get UK (GMT+0) timezone.

I know somewhere in my-very-amateur-javascript code went wrong.

Thanks in advance

This post has been edited by lilygrace: 29 October 2013 - 03:12 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Assistance on Countdown code - timer doesn't show

#2 CasiOo  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 1390
  • View blog
  • Posts: 3,071
  • Joined: 05-April 11

Re: Assistance on Countdown code - timer doesn't show

Posted 29 October 2013 - 03:51 PM

You need to keep an eye at your browser's console. It will write any errors you might get

<?php echo date('M d Y'); might evaluate to something like "Oct 29 2013"
Have you checked that the javascript compiler knows how to translate the datestring correctly?
I would much rather use milliseconds instead of relying on some formatted datestring

You have misplaced a brace on this line
current_date.setSeconds(current_sec + 1);)/>


Remove the last one, so it now will be
current_date.setSeconds(current_sec + 1);


But that's not all.. Your current_date variable is milliseconds, not a Date object
You cannot call setSeconds on a number :) Also the variable current_sec is not declared

That's at least some place to start

This post has been edited by CasiOo: 29 October 2013 - 03:53 PM

Was This Post Helpful? 0
  • +
  • -

#3 lilygrace  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 103
  • Joined: 17-August 05

Re: Assistance on Countdown code - timer doesn't show

Posted 29 October 2013 - 09:31 PM

Thanks for pointing it out. I'll work on this.
Was This Post Helpful? 0
  • +
  • -

#4 lilygrace  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 103
  • Joined: 17-August 05

Re: Assistance on Countdown code - timer doesn't show

Posted 30 October 2013 - 08:58 AM

View PostCasiOo, on 30 October 2013 - 06:51 AM, said:

You need to keep an eye at your browser's console. It will write any errors you might get

<?php echo date('M d Y'); might evaluate to something like "Oct 29 2013"
Have you checked that the javascript compiler knows how to translate the datestring correctly?
I would much rather use milliseconds instead of relying on some formatted datestring


Hi Sir, does this mean, I will just use this?

var current_date = new Date().getTime();


Was This Post Helpful? 0
  • +
  • -

#5 CasiOo  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 1390
  • View blog
  • Posts: 3,071
  • Joined: 05-April 11

Re: Assistance on Countdown code - timer doesn't show

Posted 30 October 2013 - 10:04 AM

Depends if you want the server or client time
new Date().getTime() will use the client's local time

Anyway.. you should rename your variable
getTime() will return milliseconds, so it isnt a date
var current_time = new Date().getTime()


Otherwise you should not be calling getTime() on the Date object :)

You should really tell us more about your requirements if you don't tell us an exact problem
I have no idea what date/time you are looking for..... date('M d Y') will clearly not include any hours, minutes, or seconds from the server

This post has been edited by CasiOo: 30 October 2013 - 10:08 AM

Was This Post Helpful? 0
  • +
  • -

#6 lilygrace  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 103
  • Joined: 17-August 05

Re: Assistance on Countdown code - timer doesn't show

Posted 30 October 2013 - 12:13 PM

It's a countdown counter - UK time (GMT+0). No specific date ends. It's just a counter. When UK time strikes 1pm (13 hours) the counter should reset to 24 hours.

I was thinking current time hour - 13 (1pm) = to get how many hours left before it strikes 1pm.

This post has been edited by andrewsw: 30 October 2013 - 12:44 PM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3316
  • View blog
  • Posts: 11,188
  • Joined: 12-December 12

Re: Assistance on Countdown code - timer doesn't show

Posted 30 October 2013 - 12:46 PM

Echo this:

<?php echo date('M d Y'); ?>

directly in the html so that you can check what value it gives.

Then post your current code.
Was This Post Helpful? 0
  • +
  • -

#8 lilygrace  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 103
  • Joined: 17-August 05

Re: Assistance on Countdown code - timer doesn't show

Posted 31 October 2013 - 07:14 AM

Well I used new Date().getTime() instead since it should be reading client's local time

<span id="countdown"></span>
<script>
// set the date we're counting down to
var current_date = new Date().getTime();
var current_hour = current_date.getHours();
var current_min = current_date.getMinutes();
var current_sec = current_date.getSeconds();
var current_day = current_date.getDay();
 
 
// get tag element
var countdown = document.getElementById("countdown");
 
// update the tag with id "countdown" every 1 second
setInterval(function () {

	 current_date.setSeconds(current_sec + 1);
	 
	 var hoursleft = 13 - current_hour;
	 var minutesleft = 60 - current_min;
	 var secondsleft = 60 - current_sec;
	 
	 
	if (minutesleft == 60) {
                hoursleft = hoursleft + 1;
                minutesleft = 0;
    }
	
	countdown.innerHTML = hoursleft + "h, "
			+ minutesleft + "m, " + secondsleft + "s"; 

 
    
 
}, 1000);
</script>



I'm not sure if this is how to use Date object properly. I haven't done like this before, but still, it's not working.

getTimezoneOffset() - I have trouble how to get this or how to use this properly. I saw some codes with calculation with this.

But anyway, trying to get this counter appear correctly first. :/

This post has been edited by lilygrace: 31 October 2013 - 07:16 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1