[DEV] Script Countdown Timer
Geplaatst: 23 jul 2008, 16:42
Goed ik ben aan het kijken hoe ik een countdown actief krijg weergegeven met behulp van template structuur. Onderaan staat het originele script en maar eerst het php bestand en daarna de template, laatste zit ik in vast.
Wie o Wie weet hoe op te lossen?
Hierna de template
Dit is het orginele script dat ik om wil zetten naar php file en template
Wie o Wie weet hoe op te lossen?
Code: Selecteer alles
<?
if (!defined('IN_PHPBB'))
{
exit;
}
// Define your target date here
$targetYear = 2008;
$targetMonth = 07;
$targetDay = 25;
$targetHour = 00;
$targetMinute= 00;
$targetSecond= 01;
// End target date definition
// Define date format
$dateFormat = "Y-m-d H:i:s";
$targetDate = mktime($targetHour,$targetMinute,$targetSecond,$targetMonth,$targetDay,$targetYear);
$actualDate = time();
$secondsDiff = $targetDate - $actualDate;
$remainingDay = floor($secondsDiff/60/60/24);
$remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));
$targetDateDisplay = date($dateFormat,$targetDate);
$actualDateDisplay = date($dateFormat,$actualDate);
// Assign specific vars
$template->assign_vars(array(
'REM_DAY' => $remainingDay ,
'REM_HOUR' => $remainingHour ,
'REM_MIN' => $remainingMinutes ,
'REM_SEC' => $remainingSeconds ,
'TAR_DATA' => $targetDateDisplay ,
'ACT_DATA' => $actualDateDisplay,
));
?>
Code: Selecteer alles
<script type="text/javascript">
var days = {REM_DAY} ; <!-- dit werkt niet hoe op te lossen -->
var hours = {REM_HOUR} ; <!-- dit werkt niet hoe op te lossen -->
var minutes = {REM_MIN} ; <!-- dit werkt niet hoe op te lossen -->
var seconds = {REM_SEC} ; <!-- dit werkt niet hoe op te lossen -->
function setCountDown ()
{
seconds--;
if (seconds < 0){ minutes--; seconds = 59 }
if (minutes < 0){ hours--; minutes = 59 }
if (hours < 0){ days--; hours = 23 }
document.getElementById("remain").innerHTML = days+" days, "+hours+" hours, "+minutes+" minutes, "+seconds+" seconds"; <!-- dit werkt niet hoe op te lossen -->
setTimeout ( "setCountDown()", 1000 );
}
</script>
<table class="portal" width="100%" cellspacing="1" cellpadding="0" style="margin-top: 5px;">
<tr>
<td>
<h3>Countdown</h3>
<span style="float:left;">Doel Datum:</span><br />
<span style="float:left;padding-right:10px;">{TAR_DATA}</span><br />
<hr />
<span style="float:left;">Over:</span><br />
<span style="float:left;padding-right:10px;"> <!-- Weergeven van hoeveel er nog te gaan is. --></span><br />
<hr />
<span style="float:left;">Huidige Datum:</span><br />
<span style="float:left;padding-right:10px;">{ACT_DATA}</span><br />
</td>
</tr>
</table>
Code: Selecteer alles
<?php
// Define your target date here
$targetYear = 2008;
$targetMonth = 07;
$targetDay = 25;
$targetHour = 00;
$targetMinute= 00;
$targetSecond= 01;
// End target date definition
// Define date format
$dateFormat = "Y-m-d H:i:s";
$targetDate = mktime($targetHour,$targetMinute,$targetSecond,$targetMonth,$targetDay,$targetYear);
$actualDate = time();
$secondsDiff = $targetDate - $actualDate;
$remainingDay = floor($secondsDiff/60/60/24);
$remainingHour = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
$remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))/60);
$remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-($remainingHour*60*60))-($remainingMinutes*60));
$targetDateDisplay = date($dateFormat,$targetDate);
$actualDateDisplay = date($dateFormat,$actualDate);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Till Jeff's 18th Birthday</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var days = <?php echo $remainingDay; ?>
var hours = <?php echo $remainingHour; ?>
var minutes = <?php echo $remainingMinutes; ?>
var seconds = <?php echo $remainingSeconds; ?>
function setCountDown ()
{
seconds--;
if (seconds < 0){ minutes--; seconds = 59 }
if (minutes < 0){ hours--; minutes = 59 }
if (hours < 0){ days--; hours = 23 }
document.getElementById("remain").innerHTML = days+" days, "+hours+" hours, "+minutes+" minutes, "+seconds+" seconds";
setTimeout ( "setCountDown()", 1000 );
}
</script>
</head>
<body onload="setCountDown();">
<div id="container">
<div id="header"><div id="header_left"></div>
<div id="content">
<table class="countTable">
<tr><td>Target date:</td><td><?php echo $targetDateDisplay; ?></td></tr>
<tr><th colspan="2" id="remain"><?php echo "$remainingDay days, $remainingHour hours, $remainingMinutes minutes, $remainingSeconds seconds";?></th></tr>
<tr><td>Actual date:</td><td><?php echo $actualDateDisplay; ?></td></tr>
</table>
</div>
</div>
</body>
</html>