countdown laatste 5 min vijf min extra tijd geven als er een bieding is
Ik zoek een manier om de countdowntimer als die aan zijn vijf laatste minuten aftelt en er wordt een bieding gedaan er 5 minuten extra tijd bijkomen.
De einddatum komt vanuit de databank met datetime waarvoor ik php gebruik.
Lijkt mij iets voor javascript.
Enig probleem ik ken er niks van al het een en ander opgezocht maar er niet slimmer van geworden.
Iemand enig idee hoe je dit kan oplossen.
Alvast bedankt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php require_once('Connections/bieden.php');
mysql_select_db($database_bieden, $bieden);
$query_Recordset1 = "SELECT * FROM bieden";
$Recordset1 = mysql_query($query_Recordset1, $bieden) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$einddatum = date_create($row_Recordset1['timer_stop']);/* eindtijd vanuit de databank*/
?>
<span id="given_date"></span><!-- weergave van de countdowntimer -->
<script> <!-- http://harshen.github.io/jquery-countdownTimer/ -->
$(function(){
$('#given_date').countdowntimer({
startDate : new Date($.now()),
dateAndTime : "<?php echo date_format($einddatum, 'Y/m/d H:i:s'); ?>",
size : "lg",
});
});
</script>
<form action="" method="post">
<input name="bieding" type="text">
<input name="verzendknop" type="submit" value="verzenden">
</form>
mysql_select_db($database_bieden, $bieden);
$query_Recordset1 = "SELECT * FROM bieden";
$Recordset1 = mysql_query($query_Recordset1, $bieden) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$einddatum = date_create($row_Recordset1['timer_stop']);/* eindtijd vanuit de databank*/
?>
<span id="given_date"></span><!-- weergave van de countdowntimer -->
<script> <!-- http://harshen.github.io/jquery-countdownTimer/ -->
$(function(){
$('#given_date').countdowntimer({
startDate : new Date($.now()),
dateAndTime : "<?php echo date_format($einddatum, 'Y/m/d H:i:s'); ?>",
size : "lg",
});
});
</script>
<form action="" method="post">
<input name="bieding" type="text">
<input name="verzendknop" type="submit" value="verzenden">
</form>
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 30/08/2015 12:09:01 door - Ariën -
Code (php)
1
2
3
4
5
2
3
4
5
var test = new Date($.now());
console.log(test);
// OF...
alert(test);
console.log(test);
// OF...
alert(test);
En kijk dan nog eens..
Ik heb bij mijn formulier volgende erbij geplaatst
<input name="verzendknop" type="submit" value="bieden" onclick="myFunction()" />
dan in javascript
var test = new Date($.now());
function myFunction() {
alert(test);
}
Daarmee krijg ik een alert venster met de uitgebreide info over de huidige dag.
Toevoeging op 30/08/2015 12:51:49:
Hoi,
Momenteel ben ik toch naar msql en php aan het uitkijken.
Met de functie TimeDiff
Ik heb enkel nog het probleem om die 5 min extra in de databank te krijgen.
Toch bedankt voor de hulp
Zullen wel 2 queries worden, maar dat is geen probleem.
Let op dat mensen die dus de pagina open hebben staan om de laatste paar seconden af te tellen, ook een melding moeten krijgen oid dat de tijd verlengt is en dat de bieding dus langer duurt.
Dit moet je eigenlijk welke 10 seconden wel controleren met Javascript (aangezien je teller Javascript is).
En in de laatste 10 seconden eigenlijk wel elke seconde (of halve seconde)...
Inderdaad meer dan 1 query heb je nodig.
Om de extra tijd in de databank te krijgen gebruik ik
TIMEDIFF(timer_stop,now()) AS time in de eerste query (om de timer weer te geven gebruik ik datetime)
if ($row_Recordset1["time"] < '00:05:01'){
$date = new DateTime($row_Recordset1["timer_stop"]);
$date->add(new DateInterval('PT0H5M0S'));
$time_update = $date->format('Y-m-d H:i:s');
gegevens in de databank zetten
}
Dan een query om de nieuwe timer weer te geven
Wat betreft de timer voor mensen die de pagina open staan hebben.
Zij moeten inderdaad een refresch op hun countdown timer krijgen.
Inderdaad zover had ik nog niet nagedacht.
Daar zit ik dus met het probleem dat dit in javascript moet gebeuren.
Ook al zou ik de countdown in php schrijven dan nog moet er iets gebeuren.
Ik zal eens moeten rondneuzen of ik daar iets voor vind.
Al begin ik meer in de richting van ajax te denken.
Tips zijn altijd welkom
getInfo.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
// Controleren of het een Ajax request is
if (filter_input(INPUT_SERVER, 'HTTP_X_REQUESTED_WITH') === 'XMLHttpRequest') {
// Afhankelijk of het een GET of een POST Request is, voeren we volgende acties uit
switch(filter_input(INPUT_SERVER, 'REQUEST_METHOD'))
{
case "GET":
// Doe je acties hier - Haal data op uit database
break;
case "POST":
// Doe je acties hier - Plaats data in database
break;
}
} else {
// Doe niets of maak je eigen melding
}
?>
// Controleren of het een Ajax request is
if (filter_input(INPUT_SERVER, 'HTTP_X_REQUESTED_WITH') === 'XMLHttpRequest') {
// Afhankelijk of het een GET of een POST Request is, voeren we volgende acties uit
switch(filter_input(INPUT_SERVER, 'REQUEST_METHOD'))
{
case "GET":
// Doe je acties hier - Haal data op uit database
break;
case "POST":
// Doe je acties hier - Plaats data in database
break;
}
} else {
// Doe niets of maak je eigen melding
}
?>
JQuery/Ajax voor in je bied Pagina:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$(function() {
// We updaten hier de tijd voor het bieden op een bepaald product - Nu staat ie op elk second, kun je zelf instellen
setInterval(function() {
$.ajax({
url: "getInfo.php",
type: "GET",
beforeSend: function() {
//$("#laden").show(); // Voor als je een loader wilt tonen, voor het bod wordt getoond
},
success: function(data){
$('#show').html(data);
},
error: function(msg) {
alert(msg.responseText);
},
complete: function() {
//$("#laden").hide();
}
});
}, 1000);
// We plaatsen nieuwe bod + tijd, nadat er op button is geklikt
$("#biedButton").on('click', function() {
var bod = $('#bod').val();
var extraTijd = 5; // Of op je eigen manier (Is maar een voorbeeld)
var formData = 'bod=' + bod + '&extraTijd=' + extraTijd;
$.ajax({
url: "getInfo.php",
type: "POST",
data: formData,
success: function(data) {
if(data == 1) { // Als er iets mis is gegaan, bijv, lege veld of niet op juiste manier geboden
// Fout, fout
} else if(data == 2) {
// Fout, fout
} else { // Okay, alles goed
$('#bodGeplaatst').html('Hi username, je hebt met succes je bod uitgebracht!');
}
},
error: function(msg) {
alert(msg.responseText);
}
});
return false;
});
});
// We updaten hier de tijd voor het bieden op een bepaald product - Nu staat ie op elk second, kun je zelf instellen
setInterval(function() {
$.ajax({
url: "getInfo.php",
type: "GET",
beforeSend: function() {
//$("#laden").show(); // Voor als je een loader wilt tonen, voor het bod wordt getoond
},
success: function(data){
$('#show').html(data);
},
error: function(msg) {
alert(msg.responseText);
},
complete: function() {
//$("#laden").hide();
}
});
}, 1000);
// We plaatsen nieuwe bod + tijd, nadat er op button is geklikt
$("#biedButton").on('click', function() {
var bod = $('#bod').val();
var extraTijd = 5; // Of op je eigen manier (Is maar een voorbeeld)
var formData = 'bod=' + bod + '&extraTijd=' + extraTijd;
$.ajax({
url: "getInfo.php",
type: "POST",
data: formData,
success: function(data) {
if(data == 1) { // Als er iets mis is gegaan, bijv, lege veld of niet op juiste manier geboden
// Fout, fout
} else if(data == 2) {
// Fout, fout
} else { // Okay, alles goed
$('#bodGeplaatst').html('Hi username, je hebt met succes je bod uitgebracht!');
}
},
error: function(msg) {
alert(msg.responseText);
}
});
return false;
});
});
Je kunt countdown in php of javascript schrijven, wat je fijn vindt en je kunt deze script zelf verder ontwikkelen. Dit is allemaal zonder te moeten herladen.
Gewijzigd op 01/09/2015 04:48:50 door DavY -
Ik zal het even beter uitleggen wat ik graag bereiken zou.
Het script van de countdown timer. (http://harshen.github.io/jquery-countdownTimer/)
<table style="border:0px;">
<tr>
<td colspan="4"><span id="given_date"></span></td>
</tr>
</table>
<script>
$(function(){
$('#given_date').countdowntimer({
startDate : new Date($.now()),
dateAndTime : "",
size : "lg",
});
});
</script>
De in het schript is van een databank verdinding in php. ($einddatum = date_create($row_Recordset1['timer_stop']);)
Het is de bedoeling als er via een formulier een hoger bod gedaan wordt en deze binnen de laatste 5 minuten van de countdown teller gebeurt dat er 5 minuten bij de countdown teller bijkomen.
Dit is in orde gebracht met een php formulier en werkt volledig goed dus daar moeten we ons geen zorgen meer om maken.
Wat moet er dan wel nog in orde gebracht worden?
De countdown moet een interactie hebben met een java die er voor zorgt dat de er steeds verbinding met de databank komt zodoende als er een upgrade van de timer is deze onmiddelijk wordt aangepast.
En dit pas gebeuren moet als de timer op 5 min staat of minder.
Dus als startDate en dateAndTime varibelen van het countdown script op 5 minuten staat dan pas zou deze interactie moeten gebeuren.
Voor de getinfo.php het volgende
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
// Controleren of het een Ajax request is
if (filter_input(INPUT_SERVER, 'HTTP_X_REQUESTED_WITH') === 'XMLHttpRequest') {
// Afhankelijk of het een GET of een POST Request is, voeren we volgende acties uit
switch(filter_input(INPUT_SERVER, 'REQUEST_METHOD'))
{
case "GET":
require_once('Connections/bieden.php'); /*verbinding met de databank*/
$colname_Recordset1 = "-1"; /* variabel dat van de index.php komt*/
if (isset($_GET['wagennummer'])) {
$colname_Recordset1 = $_GET['wagennummer'];
}
mysql_select_db($database_bieden, $bieden);
$query_Recordset1 = sprintf("SELECT * FROM wagen WHERE wagen_ID = %s", GetSQLValueString( $colname_Recordset1, "int"));
$Recordset1 = mysql_query($query_Recordset1, $bieden) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$resultaat = $row_Recordset1["timer_stop"]; /* de nieuwe timer tijd die terug moet gestuurd worden naar index.php countdown timer. Er kan maar 1 resultaat uitkomen. Het updaten van de tijd gebeurt niet via deze manier. */
break;
case "POST":
// Doe je acties hier - Plaats data in database
break;
}
} else {
// Doe niets of maak je eigen melding
}
?>
// Controleren of het een Ajax request is
if (filter_input(INPUT_SERVER, 'HTTP_X_REQUESTED_WITH') === 'XMLHttpRequest') {
// Afhankelijk of het een GET of een POST Request is, voeren we volgende acties uit
switch(filter_input(INPUT_SERVER, 'REQUEST_METHOD'))
{
case "GET":
require_once('Connections/bieden.php'); /*verbinding met de databank*/
$colname_Recordset1 = "-1"; /* variabel dat van de index.php komt*/
if (isset($_GET['wagennummer'])) {
$colname_Recordset1 = $_GET['wagennummer'];
}
mysql_select_db($database_bieden, $bieden);
$query_Recordset1 = sprintf("SELECT * FROM wagen WHERE wagen_ID = %s", GetSQLValueString( $colname_Recordset1, "int"));
$Recordset1 = mysql_query($query_Recordset1, $bieden) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$resultaat = $row_Recordset1["timer_stop"]; /* de nieuwe timer tijd die terug moet gestuurd worden naar index.php countdown timer. Er kan maar 1 resultaat uitkomen. Het updaten van de tijd gebeurt niet via deze manier. */
break;
case "POST":
// Doe je acties hier - Plaats data in database
break;
}
} else {
// Doe niets of maak je eigen melding
}
?>
Voor het script in de index.php
Hier moet een variabel GET["wagennummer"] verstuurd worden.
Ook is het de bedoeling dat dateAndTime van het countdown script wordt aangepast zodoende de nieuwe tijd zichtbaar wordt zonder een refresch van de pagina hoeven te doen.
Nu wordt de id #show met info getoond maar dit hoeft niet enkel de countdown teller hoeft aangepast te worden.
<sript>
$(function() {
setInterval(function() {
$.ajax({
url: "getInfo.php",
type: "GET",
beforeSend: function() {
//$("#laden").show(); // Voor als je een loader wilt tonen, voor het bod wordt getoond
},
success: function(data){
$('#show').html(data);
},
error: function(msg) {
alert(msg.responseText);
},
complete: function() {
//$("#laden").hide();
}
});
}, 1000);
</script>
Plaats na type: "GET",:
Code (php)
1
data: "wagennummer=" + "<?= filter_input(INPUT_GET, 'wagennummer', FILTER_SANITIZE_NUMBER_INT); ?>",
Verplaats dit naar na regel 3:
Code (php)
1
2
3
4
2
3
4
<?php
require_once('Connections/bieden.php'); /*verbinding met de databank*/
mysql_select_db($database_bieden, $bieden);
?>
require_once('Connections/bieden.php'); /*verbinding met de databank*/
mysql_select_db($database_bieden, $bieden);
?>
Je zou er verstandig aan doen om te gaan upgraden naar mysqli(), anders gaat dit je binnenkort koppijn bezorgen, doordat mysql() eruit gaat.
Edit: Met countdown timer schrijven in php, doel ik dan op GET gedeelte in getInfo.php waar je dat kunt doen en in POST gedeelte kun je dan nieuwe tijd + bod naar database versturen.
Gewijzigd op 02/09/2015 03:11:42 door DavY -
Bedankt voor de tips.
Ik ga er nu het beste van maken en een php countdown timer lijkt mij hierook het beste te zijn.