Create countdown timer using database date

Question

I'm new to javascript and I'm really confused about what I need to do. I have added a javascript countdown timer to my site, it was easy to add.

This is the javascript:

<script LANGUAGE="JavaScript">
// This following statement must be left intact.
// Copyright (c) Michael Bloch and Taming The Beast.
// Countdown timer script v1.2 April 20 2009
// Taming the Beast.net - http://www.tamingthebeast.net
// Free Web Marketing and Ecommerce articles and tools
// By using this code you agree to indemnify Taming the Beast
// from from any liability that might arise from its use.
// The preceding statement be left intact.


var present;
var future;
var tseconds;
var seconds;
var minutes;
var hours;
var days;
ID=setTimeout("countdown();", 1000);

function countdown()
{
present = new Date();
present = present.getTime() + (60000) + (12 * 60 * 60 * 1000);
future = new Date("June 30, 2014 12:10:30");

tseconds = (future - present) / 1000;

days = tseconds /24/60/60;
days = Math.floor(days);
tseconds = tseconds - (days * 24 * 60 * 60);

hours = tseconds /60/60;
hours = Math.floor(hours);
tseconds = tseconds - (hours * 60 * 60);

minutes = tseconds /60;
minutes = Math.floor(minutes);
tseconds = tseconds - (minutes * 60);

seconds = tseconds;
seconds = Math.floor(seconds);

document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;
ID=setTimeout("countdown();", 1000);
}
</script>

This is the code to display the timer on the page:

<SPAN id="days">0</SPAN> &nbsp;days &nbsp;&nbsp;
<SPAN id="hours">0</SPAN> &nbsp;hr.&nbsp;&nbsp;
<SPAN id="minutes">0</SPAN>&nbsp;min,&nbsp;
<SPAN id="seconds">0</SPAN>&nbsp;sec.&nbsp;

However, the timer is using a date that is specified in the javascript. I need it to use a date from a mysql database. I need a countdown timer to show when a product sale is ending. It needs to pull the correct date based on product id.

I have a module installed that displays the date the sale is ending. It doesn't use javascript, it's just php. I'm wondering if I can somehow use it with the javascript to display the countdown instead of the ending date?

This is the function that gets the end date from the database for the module that I am using now:

<?php 
// Sale Special Ending - Copyright That Software Guy, Inc. 2010.
// http://www.thatsoftwareguy.com
// Some portions copyright 2003-2010 Zen Cart Development Team
// Some portions copyright 2003 osCommerce
function countdown($id, $longdate = true, $one_day_back = false) { 
   $id = (int)$id; 
   global $db; 

   if (zen_get_products_special_price($id, true)) {
      $specials = $db->Execute("select expires_date, UNIX_TIMESTAMP(expires_date) as unix_expires_date from " . TABLE_SPECIALS . " where products_id = '" . $id . "' and status='1' AND expires_date !='0001-01-01'");
      if (!$specials->EOF) { 
         if (!$one_day_back) { 
            $enddate = $specials->fields['expires_date']; 
         } else { 
            $enddate = $specials->fields['unix_expires_date']; 
            $enddate_ts = strtotime("-1 day", $enddate);
            $enddate = date("Y-m-d H:i:s", $enddate_ts); 
         }
         if ($longdate) {
            $date_str = zen_date_long($enddate);
         } else { 
            $date_str = zen_date_short($enddate);
         }
         return $date_str; 
      }
   } 
   if (zen_get_products_special_price($id, false)) { 
      $product_price = zen_get_products_base_price($id);
      $product_to_categories = $db->Execute("select master_categories_id from " . TABLE_PRODUCTS . " where products_id = '" . $id . "'");
      $category = $product_to_categories->fields['master_categories_id'];
      $sales = $db->Execute("select sale_date_end, UNIX_TIMESTAMP(sale_date_end) as unix_sale_date_end from " . TABLE_SALEMAKER_SALES . " where sale_categories_all like '%," . $category . ",%' and sale_status = '1' and (sale_date_start <= now() or sale_date_start = '0001-01-01') and (sale_date_end >= now() or sale_date_end = '0001-01-01') and (sale_pricerange_from <= '" . $product_price . "' or sale_pricerange_from = '0') and (sale_pricerange_to >= '" . $product_price . "' or sale_pricerange_to = '0')");
      if ($sales->EOF) return ''; 
      if ($sales->fields['sale_date_end'] == '0001-01-01') return ''; 
      if (!$one_day_back) { 
         $enddate = $sales->fields['sale_date_end']; 
      } else { 
         $enddate = $sales->fields['unix_sale_date_end']; 
         $enddate_ts = strtotime("-1 day", $enddate);
         $enddate = date("m d Y H:i:s", $enddate_ts); 
      }
      if ($longdate) {
         $date_str = zen_date_long($enddate);
      } else { 
         $date_str = zen_date_short($enddate);
      }
      return TEXT_SALE_EXPIRES . $date_str; 
   }
   return ''; 
}
?>

And this is the code that displays the end date on the product page:

<!--bof Sale Special Ending block -->
<?php
$ssblock = countdown((int)$_GET['products_id']);
if ($ssblock != '') {
  echo "<div class='ssblock'>" . $ssblock . "</div>"; 
}
?>
<!--eof Sale Special Ending block -->

I just can't figure out how to make it all work together.

guest · Accepted Answer · 2014-05-06 00:50:44Z

1

You can use PHP to fetch the date from the database and then write a script tag to set the start date for the countdown state.

I assume you know how to fetch the date from the database, since you already have a module that displays the end date.

Suppose the date is in $end. The following would ... like, create a future global variable in JavaScript.

<script>var future = new Date("<?php echo $end; ?>");</script>

Then remove that line with the hardcoded date,

future = new Date("June 30, 2014 12:10:30");

Anyway, there are lots of ways to improve on the code in this answer.

answered May 6, 2014 at 0:50

guest

6,75833 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3606142 Over a year ago

Thank you, but where would I put the new bit of script? I tried in the php page and the javascript page, but it didn't work.

user3606142 Over a year ago

I edited my original post to include the php function that is getting the enddate from the database.

guest Over a year ago

Put it before the countdown script. That way, future will be available to the countdown code.

user3606142 Over a year ago

I tried that but it doesn't work. The countdown just shows this now: NaN days NaN hr. NaN min, NaN sec.

J261 · Accepted Answer · 2014-05-06 00:27:16Z

0

i make this for you, maybe can help you:

http://jsfiddle.net/CnV5A/

var days=10,hours=1,minutes=1,seconds=5;

var container = document.getElementById("countdown");

function countdown(){
        if(seconds == 0){
            seconds = 59;
            minutes--;
        }else{
            seconds--;
        }
        if(minutes == -1){
            minutes = 59;
            hours--;
         }
         if(hours == -1){
             days--;
        }
    container.innerHTML = "days:"+days+", hours:"+hours+", minutes:"+minutes+", seconds:"+seconds;
    setTimeout(countdown,1000);

    }

countdown();

answered May 6, 2014 at 0:27

J261

6722 gold badges6 silver badges21 bronze badges

1 Comment

user3606142 Over a year ago

Thank you, but is this getting the date/time from the database somehow? I don't see how to do that?

Collectives™ on Stack Overflow

Create countdown timer using database date

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related