Timer
Ik heb hier een probleempje. Ik wil graag een timer laten aftellen van 5 minuten naar 0 minuten (5:00 --> 0:00) ik heb alleen geen idee hoe ik hier aan moet beginnen. Ik heb wel op internet gezocht, maar daar hebben ze alleen timers die naar het nieuwe jaar aftellen. Dat is niet iets wat ik zoek. Ik wil alleen dat je gewoon dat je 5 minuten ziet, en als je op een knop drukt, hij af begint te tellen naar 0 minuten. Als hij dan bij 0 minuten staat moet er een ander scherm worden geopend. kan iemand mij misschien helpen?
groet
Viktor
Viktor Jonckheere op 18/02/2011 10:33:31:
Als hij dan bij 0 minuten staat moet er een ander scherm worden geopend
Een ander scherm?
Een pop up?
Kris Peeters op 18/02/2011 11:52:07:
Een ander scherm?
Een pop up?
Viktor Jonckheere op 18/02/2011 10:33:31:
Als hij dan bij 0 minuten staat moet er een ander scherm worden geopend
Een ander scherm?
Een pop up?
Ja bijvoorbeeld van invulscherm.php naar uitslag.php
Toevoeging op 18/02/2011 13:13:33:
- SanThe - op 18/02/2011 12:47:27:
Oke bedankt:) het enige probleem is, dat ik eigenlijk niks weet van javascript. Ik wilde dan ook een timer maken met php. Is dat mogelijk? of moet je hiervoor zoeizo gebruik maken van javascript?
Viktor Jonckheere op 18/02/2011 13:12:05:
... een timer maken met php. Is dat mogelijk? of moet je hiervoor zoeizo gebruik maken van javascript?
Sowieso javascript.
Javascript gebruikt de rekenkracht van de PC van de gebruiker om code uit te voeren.
PHP voert code uit op de server.
Je kan niet zomaar constant connectie maken met de server om iets kleins aan te passen.
Ondertussen kan je hier al eens naar kijken
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<head>
<style>
#message {
color: #ff0000;
font-height: 25px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
countdownInterval(
// TO DO: Zie dat je dit aanpast naar je wensen !!!!!!!!!!!
0, // UUR.
5, // MINUTEN
0 // SECONDEN
);
});
// globals
var dateObj = null;
var targetDateObj = null;
var timerObj = null;
function doCountdown() {
timerObj.setHours (targetDateObj.getHours() - dateObj.getHours());
timerObj.setMinutes (targetDateObj.getMinutes() - dateObj.getMinutes());
timerObj.setSeconds (targetDateObj.getSeconds() - dateObj.getSeconds());
displayFunction ();
if (
timerObj.getHours() == 0 &&
timerObj.getMinutes() == 0 &&
timerObj.getSeconds() == 0
) {
alertFunction();
return null;
}
dateObj.setSeconds(dateObj.getSeconds() + 1);
setTimeout("doCountdown()", 1000);
}
function countdownInterval(H, i, s) {
dateObj = new Date();
timerObj = new Date();
targetDateObj = new Date();
targetDateObj.setHours(dateObj.getHours() + H);
targetDateObj.setMinutes(dateObj.getMinutes() + i);
targetDateObj.setSeconds(dateObj.getSeconds() + s);
doCountdown();
}
function displayFunction () {
$('#count2').val(
timerObj.getHours() +":"+
timerObj.getMinutes() +":"+
timerObj.getSeconds()
);
}
function alertFunction() {
// HIER KOMT DUS DE POPUP
$('#message').html('polifinario');
}
</script>
</head>
<body>
<input type="text" id="count2">
<div id="message"></div>
</body>
</html>
<head>
<style>
#message {
color: #ff0000;
font-height: 25px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
countdownInterval(
// TO DO: Zie dat je dit aanpast naar je wensen !!!!!!!!!!!
0, // UUR.
5, // MINUTEN
0 // SECONDEN
);
});
// globals
var dateObj = null;
var targetDateObj = null;
var timerObj = null;
function doCountdown() {
timerObj.setHours (targetDateObj.getHours() - dateObj.getHours());
timerObj.setMinutes (targetDateObj.getMinutes() - dateObj.getMinutes());
timerObj.setSeconds (targetDateObj.getSeconds() - dateObj.getSeconds());
displayFunction ();
if (
timerObj.getHours() == 0 &&
timerObj.getMinutes() == 0 &&
timerObj.getSeconds() == 0
) {
alertFunction();
return null;
}
dateObj.setSeconds(dateObj.getSeconds() + 1);
setTimeout("doCountdown()", 1000);
}
function countdownInterval(H, i, s) {
dateObj = new Date();
timerObj = new Date();
targetDateObj = new Date();
targetDateObj.setHours(dateObj.getHours() + H);
targetDateObj.setMinutes(dateObj.getMinutes() + i);
targetDateObj.setSeconds(dateObj.getSeconds() + s);
doCountdown();
}
function displayFunction () {
$('#count2').val(
timerObj.getHours() +":"+
timerObj.getMinutes() +":"+
timerObj.getSeconds()
);
}
function alertFunction() {
// HIER KOMT DUS DE POPUP
$('#message').html('polifinario');
}
</script>
</head>
<body>
<input type="text" id="count2">
<div id="message"></div>
</body>
</html>
Kris Peeters op 18/02/2011 15:02:09:
Zeg eens wat je precies nodig hebt; wat je precies wil doen met de timer.
Ik wil een scherm maken waarbij de score van twee voetbalteams kan worden bijgehouden. Als er dan op 'begin wedstrijd' wordt gedrukt, dan moet er een tijd gaan lopen van 5 minuten naar 0 minuten. Als er een doelpunt wordt gemaakt voor 1 van de teams moet er op een knop worden gedrukt zodat het aantal doelpunten + 1 wordt. Als de timer op 0 staat en de stand is gelijk, dan moet er nog een extra minuut worden gespeeld. Als er een winnaar is, of uiteindelijk nog steeds een gelijkspel, moeten de scores worden opgeslagen in de database. Ik ben dus nu bezig met die timer, maar ik heb geen flauw idee hoe ik dit moet oplossen. Ik zal eens even naar de code kijken die je net stuurde;) kijken of het daarmee lukt.
Toevoeging op 21/02/2011 12:30:50:
Code is prima! Alleen kan je de tijd steeds weghalen, kan je dat veranderen?
Ik moet eerlijk zeggen dat ik weinig begrijp van javascript, dus zou je misschien een beetje kunnen uitleggen wat je precies doet? Zou fijn zijn:)
heel erg bedankt alvast:)
Wat daar gebeurt, verandert niets aan de logica, maar daar moet je wel de aanpassingen doen om de functies te laten doen wat ze moeten doen.
$('#count2').val( ... ) vult de value in van een element met id="count2".
$('#count2').html( ... ) zou dan weer de html invullen tussen begin en eind-tag van een html element met d="count2".
Dus ja, je kan die input vervangen door bv.
<div id="timer_display"></div>
Dan zet je in displayFunction()
Code (php)
1
2
3
4
5
2
3
4
5
$('#timer_display').html(
timerObj.getHours() +":"+
timerObj.getMinutes() +":"+
timerObj.getSeconds()
);
timerObj.getHours() +":"+
timerObj.getMinutes() +":"+
timerObj.getSeconds()
);
Vandaar dus, nu je ziet dat het functioneert; nu moet ik weten wat er precies moet gebeuren.
Viktor Jonckheere op 21/02/2011 12:21:48:
Ik wil een scherm maken waarbij ...
Maak dat dan alvast eens.
Zie dat je alles van HTML hebt, zoals je het zou willen zien als eindresultaat; maar dus zonder dat het hoeft te werken.
Dan kunnen we zien om alles aan mekaar te knopen
Gewijzigd op 21/02/2011 13:41:23 door Kris Peeters