CODEWITHSUNDEEP
javascriptjquery
TripleDeal
TripleDeal

Reputation: 736

Javascript countdown to hour

I'm currently using the jQuery Countdown plugin created by Keith Wood, but I can't get it to work, I need to display how many hours, minutes and seconds are left till a certain time of the day (for example: 18:00:00).

The code inside the body tag:

<?php
$begintijd = $display['start'].":00:00";
?>
<script>
var begintijd = "<?php echo $begintijd ?>";
$(function () {
    var vandaag = new Date();
    werktijd = new Date(vandaag.getDay() begintijd);
    $('#defaultCountdown').countdown({until: werktijd, format: 'HMS'});
});
</script>

$display['start'] returns in this situation with 18 (and the value is correct).

The code inside head tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/plugin/js/jquery.plugin.js"></script>
<script src="assets/plugin/js/jquery.countdown.js"></script>

jQuery plugin file: http://keith-wood.name/js/jquery.plugin.js

jQuery countdown file: http://keith-wood.name/js/jquery.countdown.js

Chrome says "Uncaught SyntaxError: missing ) after argument list" on line:

werktijd = new Date(vandaag.getDay() 18:00:00);

I'm new to Javascript and any help will be appreciated, thanks in advance.

Upvotes: 1

Views: 1106

Answers (2)

bitifet
bitifet

Reputation: 3659

It seems that below code wouldn't return a valid date either "???" being "," or "-" (I couldn't figure out what you where tryng to do):

var vandaag = new Date();
werktijd = new Date(vandaag.getDay() ??? begintijd);

So first step is to add a `console.log(werktijd) just after it to check if it returns a valid date (and, I figure out, if it is on current day).

Next check Date() syntax.

If I'm not wrong, what you are trying to do is:

var vandaag = new Date();
// (EDIT) var begintijdHour = new Date(begintijd).getHours();
var begintijdTime = new Date(
    vandaag.toDateString()
    + " "
    +  begintijd
);

werktijd = new Date(
    vandaag.getFullYear(),
    vandaag.getMonth(),
    vandaag.getDay(),
    begintijTime.getHours(),
    begintijTime.getMinutes(),
    begintijTime.getSeconds()
);

// Checks:
console.log(vandaag); // Should output current time.
console.log(begintijdHour); // If shows NaN, then begintijd is much
    // probably not properly formatted as valid dateString input
    // (see below w3schools link).

EDIT: I edited below snipped after knowing that input lacks date part. Also modified last werktijd calculation to take in account minutes and seconds (if provided).

If you only want to take in account hour part (just as original code were doing), you can do it by simply using a regular expression. There is no need to convert begintij to Date() object. Simply calculate it as:

var begintijHour = begintij.replace(/:.*/, '');

Upvotes: 0

Harry Bomrah
Harry Bomrah

Reputation: 1668

Well I had a script which will work without any plugin, might be in use

HTML

<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>

Javascript & php

<%php $begintijd = $display['start']; %>

$(document).ready(function(){  
    var timer = null,
        begintijd = "<%php echo $begintijd %>",
        endTime = new Date(); //time you want to end

   endTime.setHours(begintijd);
   endTime.setMinutes(0);
   endTime.setSeconds(0);
   endTime = (Date.parse(endTime)) / 1000;

    function makeTimer() {
        var now = new Date(),
            now = (Date.parse(now) / 1000),
            timeLeft = endTime - now;
       if(timeLeft > 0){
            var days = Math.floor(timeLeft / 86400),
                hours = Math.floor((timeLeft - (days * 86400)) / 3600),
                minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60),
                seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
           if (hours < "10") { hours = "0" + hours; }
           if (minutes < "10") { minutes = "0" + minutes; }
           if (seconds < "10") { seconds = "0" + seconds; }    

           $("#days").html(days + "<span>Days</span>");
           $("#hours").html(hours + "<span>Hours</span>");
           $("#minutes").html(minutes + "<span>Minutes</span>");
           $("#seconds").html(seconds + "<span>Seconds</span>");

      }else{
       clearInterval(timer);
       $("#seconds").html("<span>00Seconds</span>");
      }  
   }
timer = setInterval(function() { makeTimer(); }, 1000);
})

JS Fiddle https://jsfiddle.net/69ax5j4L/

Upvotes: 1

Related Questions