Realtime javascript teller
Ik ben een total noob als het aankomt op javascript. So bare with me please...
Ik ben bezig met een website. Deze website maakt gebruik van een database. In deze database staan entries met geldbedragen. Deze geldbedragen laat ik de database bij elkaar optellen en dat is dus het bedragTotaal (o.i.d.). Het script en de database hiervoor moet ik nog maken.
Op deze website wil ik graag een realtime teller tonen (javascript?) die iedere seconde controleert wat het bedragTotaal is. Wanneer dit omhoog is gegaan dient de teller naar boven te worden bijgesteld. Het liefst zie ik dan de cijfers naar boven 'wegrollen' zoals je bij een gasmeter ook hebt. Dit zal dus een soort transitie of animatie moeten zijn.
Wie kan mij op weg helpen want ik heb gezocht, maar kom geen script tegen waar ik iets mee kan.
EDIT:
Ik heb een script gevonden dat optelt:
http://developer.mindtouch.com/User:Howleyda/Plain_Ticker
Helaas werkt het nog niet. Vreemd, want op de developers page werkt het uitstekend. Maar hoe kan ik er voor zorgen dat het script iedere seconde het bedragTotal controleert en optelt vanaf het huidige bedragTotal naar het nieuwe bedragTotal? En is het dan mogelijk om een soort van transitie toe te voegen? Bijvoorbeeld dat de eerste en laatste cijfers langzamer gaan dan de middelste?
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<h1>Jquery Number Ticker - By Damien Howley</h1>
<div class="counter-wrap">
<div class="counter-number">
</div>
</div>
<div>
<style>
.counter-wrap {
height:18px;
overflow:hidden;
}
.counter-number {
height:198px;
width:12px;
position:relative;
background-image:url(img/counter_ticker_bg.gif);
float:left;
}
</style>
<a href="#" onclick="loadticker(0786554)">load ticker - 786554</a><br/><br/>
<a href="#" onclick="loadticker(01767697234789837)">load ticker - 1767697234789837</a><br/><br/>
<a href="#" onclick="loadticker(01988989)">load ticker - 1988989</a><br/><br/>
</div>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
Deki.$(".counter-number").each( function(i) {
Deki.$(this).attr('id','num'+i);
});
function loadinput() {
var newval = Deki.$("#numgo").val();
loadticker(newval);
}
function loadticker(ticnum) {
var fticnum = add_commas(ticnum);
var numheight=18;
addticker(fticnum);
if (ticnum && ticnum != 0) {
var s = String(fticnum);
for (i=s.length;i>=0; i--)
{
var onum=s.charAt(i);
Deki.$("#num"+i).attr('value',onum);
}
Deki.$(".counter-number").each( function() {
var nval=Deki.$(this).attr("value");
if (!isNaN(nval)) {
var nheight = Number(nval)*numheight*-1;
Deki.$(this).animate({ top: nheight+'px'}, 1500 );
}
if (nval==','){
Deki.$(this).animate({ top: '-180px'}, 1500 );
}
});
}
}
function addticker(newnum) {
var digitcnt = Deki.$(".counter-number").size();
var nnum = String(newnum).length;
var digitdiff = Number(nnum - Number(digitcnt));
if (digitdiff <0) {
var ltdig = (Number(nnum)-1);
Deki.$(".counter-number:gt(" + ltdig + ")").remove();
}
for(i=1;i<=digitdiff;i++) {
Deki.$(".counter-wrap").append('<div class="counter-number" id="num' + (Number(digitcnt+i-1)) + '"> </div>');
}
}
function add_commas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<h1>Jquery Number Ticker - By Damien Howley</h1>
<div class="counter-wrap">
<div class="counter-number">
</div>
</div>
<div>
<style>
.counter-wrap {
height:18px;
overflow:hidden;
}
.counter-number {
height:198px;
width:12px;
position:relative;
background-image:url(img/counter_ticker_bg.gif);
float:left;
}
</style>
<a href="#" onclick="loadticker(0786554)">load ticker - 786554</a><br/><br/>
<a href="#" onclick="loadticker(01767697234789837)">load ticker - 1767697234789837</a><br/><br/>
<a href="#" onclick="loadticker(01988989)">load ticker - 1988989</a><br/><br/>
</div>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
Deki.$(".counter-number").each( function(i) {
Deki.$(this).attr('id','num'+i);
});
function loadinput() {
var newval = Deki.$("#numgo").val();
loadticker(newval);
}
function loadticker(ticnum) {
var fticnum = add_commas(ticnum);
var numheight=18;
addticker(fticnum);
if (ticnum && ticnum != 0) {
var s = String(fticnum);
for (i=s.length;i>=0; i--)
{
var onum=s.charAt(i);
Deki.$("#num"+i).attr('value',onum);
}
Deki.$(".counter-number").each( function() {
var nval=Deki.$(this).attr("value");
if (!isNaN(nval)) {
var nheight = Number(nval)*numheight*-1;
Deki.$(this).animate({ top: nheight+'px'}, 1500 );
}
if (nval==','){
Deki.$(this).animate({ top: '-180px'}, 1500 );
}
});
}
}
function addticker(newnum) {
var digitcnt = Deki.$(".counter-number").size();
var nnum = String(newnum).length;
var digitdiff = Number(nnum - Number(digitcnt));
if (digitdiff <0) {
var ltdig = (Number(nnum)-1);
Deki.$(".counter-number:gt(" + ltdig + ")").remove();
}
for(i=1;i<=digitdiff;i++) {
Deki.$(".counter-wrap").append('<div class="counter-number" id="num' + (Number(digitcnt+i-1)) + '"> </div>');
}
}
function add_commas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
</script>
</body>
</html>
Gewijzigd op 19/12/2010 14:58:50 door The Ultimate
* elke seconde checken: zet een timer in javascript met setInterval; doe in de functie die je dan aanroept een ("ajax")oproep naar je server die je een bedragTotaal kan geven. Wijkt dat af van je huidige, dat je ergens in de scope opslaat, roep dan je oprol-functie aan
* omhoogtellen: maak een plaatje waarin de cijfers van 0-9 onder elkaar staan: "cijferbalk". Onder die 9 moet weer een 0 volgen voor een vloeiende overgang. Maak een functie/object dat 1 cijfer kan weergeven, in een divje, cijferbalk in de achtergrond, overflow=hidden, positie zodat het gewenste cijfer in beeld is
Zoiets?
<script type="text/javascript">
setInterval(loadticker(12345),1000);
</script>
En hoe kan ik dan de php-waarde $bedragTotaal in het script krijgen? Ik neem aan dat ik niet gewoon een php-var aan kan roepen midden in javascript?
Zie jij toevallig waarom het script zoals ik hierboven heb geplaatst niet werkt? Het werkt op de demo pagina namelijk prima. Maar in mijn live-omgeving niet.
Gewijzigd op 19/12/2010 15:32:17 door The Ultimate
Dit werkt wel, een beetje. In elkaar geknutseld sinds mijn vorige post.
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
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
<style type="text/css">
div.digit {
border: 1px solid blue;
height: 1em;
width: 1em;
overflow: hidden;
}
.digit pre {
margin-top: 0px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#reset').click(function() {digits(0)});
$('#goto').click(function() {digits()});
});
function digits() {
var setval = $('#goto_val').val();
if (!setval) setval = 0;
if (arguments.length) {
setval = arguments[0];
}
var pos = -15*setval;
$('#d0 pre').animate({'margin-top': pos}, 1000);
}
</script>
<div id="d0" class="digit"><pre>0
1
2
3
4
5
6
7
8
9
div.digit {
border: 1px solid blue;
height: 1em;
width: 1em;
overflow: hidden;
}
.digit pre {
margin-top: 0px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#reset').click(function() {digits(0)});
$('#goto').click(function() {digits()});
});
function digits() {
var setval = $('#goto_val').val();
if (!setval) setval = 0;
if (arguments.length) {
setval = arguments[0];
}
var pos = -15*setval;
$('#d0 pre').animate({'margin-top': pos}, 1000);
}
</script>
<div id="d0" class="digit"><pre>0
1
2
3
4
5
6
7
8
9
</pre>
</div>
<button id="reset">Reset</button>
<button id="goto">Goto</button><input id="goto_val" size="2"/>
Ik heb jouw ticker even geprobeerd en wellicht kan het op die manier ook. Ik heb wel de waarde -15*setval gewijzigd in -16*setval omdat 1em = 16px en niet 15px. Nu loopt hij mooier.
Dit script heeft echter wel een groot nadeel, namelijk dat je alle getallen die je ooit zult willen weergeven moet noteren. Aangezien mijn teller toch ergens in de 100.000 terecht gaat komen is dit dus geen optie. Hoe kan ik dit oplossen?
Alvast bedankt voor het meedenken!
Gewijzigd op 19/12/2010 16:00:40 door The Ultimate
Owja, inderdaad. Je hebt helemaal gelijk.
Maar stel nou dat ik het toch liever niet met die omhoogrolfunctie doe maar gewoon wil tellen (dus de nummers overschrijven elkaar en schuiven niet weg naar boven). Kan ik dat op deze manier dan doen:
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
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
<?php
function checkBedragTotaal()
{
$sql = "SELECT SUM(bedrag) AS bedragTotaal FROM table";
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)) {
return $row['bedragTotaal'];
}
}
//
$startValue = checkBedragTotaal();
$endValue = $startValue;
?>
<!-- Geef de counter weer -->
<div id="counter">
</div>
<script type="text/javascript">
// Controleer iedere 10 seconden of bedragTotaal is gewijzigd.
// Als het bedragTotaalOud != bedragTotaal -> counter starten en optellen naar bedragTotaal.
// Als bedragTotaal is bereikt, counter stoppen.
// Weer opnieuw beginnen met om de 10 seconden te controleren of bedragTotaal is gewijzigd.
</script>
function checkBedragTotaal()
{
$sql = "SELECT SUM(bedrag) AS bedragTotaal FROM table";
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)) {
return $row['bedragTotaal'];
}
}
//
$startValue = checkBedragTotaal();
$endValue = $startValue;
?>
<!-- Geef de counter weer -->
<div id="counter">
</div>
<script type="text/javascript">
// Controleer iedere 10 seconden of bedragTotaal is gewijzigd.
// Als het bedragTotaalOud != bedragTotaal -> counter starten en optellen naar bedragTotaal.
// Als bedragTotaal is bereikt, counter stoppen.
// Weer opnieuw beginnen met om de 10 seconden te controleren of bedragTotaal is gewijzigd.
</script>
Kun je een php-functie aanroepen in javascript?
Gewijzigd op 19/12/2010 17:17:10 door The Ultimate
Je moet dus vanuit javascript een request naar de server versturen: Geef me dat totaal nog es!
Heb jij jquery wel aan boord? Dan kun je zoiets doen als (html, waarschuwing: "air code", bedacht maar niet geprobeerd)
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="counter"></div>
<script type="text/javascript">
window.setInterval(pollServer, 10000);
function pollServer() {
$.get('bedrag_server.php', function(data) {
$('#counter').html(data);
});
}
</script>
<script type="text/javascript">
window.setInterval(pollServer, 10000);
function pollServer() {
$.get('bedrag_server.php', function(data) {
$('#counter').html(data);
});
}
</script>
en dan heb je nog een php-bestand nodig, dat ik "bedrag_server.php" heb genoemd:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
function checkBedragTotaal()
{
$sql = "SELECT SUM(bedrag) AS bedragTotaal FROM table";
$res = mysql_query($sql);
if ($res && $row = mysql_fetch_assoc($res)) {
return $row['bedragTotaal'];
}
return '';
}
echo checkBedragTotaal();
[/code]
function checkBedragTotaal()
{
$sql = "SELECT SUM(bedrag) AS bedragTotaal FROM table";
$res = mysql_query($sql);
if ($res && $row = mysql_fetch_assoc($res)) {
return $row['bedragTotaal'];
}
return '';
}
echo checkBedragTotaal();
[/code]
Je bent een held! Ik heb het inmiddels zover gekregen dat het script inderdaad
EDIT
De interval werkt als je 'window.' ervoor weghaalt. Dan update het script om de 10 sec.
END EDIT
Nu moet ik alleen nog even gaan sleutelen om ervoor te zorgen dat wanneer er een nieuw (hoger) bedragTotaal is dan het vorige bedragTotaal dat het script dan niet simpelweg het nieuwe bedragTotaal laat zien, maar gaat optellen vanaf het oude bedragTotaal naar het nieuwe bedragTotaal.
Ik ga nu eerst even een hapje eten en dan maar hopen dat ik van de vrouw nog achter de pc mag (lol). Ik kom er vanavond of anders morgen op terug.
Bedankt voor de inzet!
Gewijzigd op 19/12/2010 18:17:59 door The Ultimate
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.setInterval(dinges, 1000);
var teller = 0;
function dinges() {
$('#res').html(teller++);
}
</script>
<div id="res"></div>
<script type="text/javascript">
window.setInterval(dinges, 1000);
var teller = 0;
function dinges() {
$('#res').html(teller++);
}
</script>
<div id="res"></div>
Kijk of dit bij jou telt. Zo nee, dan is er iets raars :) en zo ja, zoek de verschillen met jouw code.
Bas Cost Budde op 19/12/2010 18:20:48:
Ja, dit werkt bij mij.Kijk of dit bij jou telt. Zo nee, dan is er iets raars :) en zo ja, zoek de verschillen met jouw code.
Maar de bedoeling is niet dat er lukraak wordt geteld zodra er een bezoeker op de pagina komt. De bedoeling is als volgt:
// Bezoeker landt op pagina -> toon huidig bedragTotaal.
// Controleer vervolgens iedere 10 seconden of bedragTotaal is gewijzigd (ingelogde bezoekers kunnen achter de schermen namelijk een bedrag hebben toegevoegd aan de database waardoor het bedragTotaal hoger is geworden).
// Als het bedragTotaalOud != bedragTotaal -> teller starten en optellen naar het nieuwe bedragTotaal.
// Als bedragTotaal is bereikt, teller stoppen.
// Vervolgens pas weer na 10 seconden controleren of bedragTotaal is gewijzigd.
// Begin opnieuw. Enzovoort, enzovoort... (loop)
Ik heb hier een ticker die werkt:
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
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
<script language="javascript" type="text/javascript">
<!--
// http://www.dailycoding.com/Posts/object_oriented_programming_with_javascript__timer_class.aspx
// Declaring class "Timer"
var Timer = function()
{
// Property: Frequency of elapse event of the timer in millisecond
this.Interval = 1000;
// Property: Whether the timer is enable or not
this.Enable = new Boolean(false);
// Event: Timer tick
this.Tick;
// Member variable: Hold interval id of the timer
var timerId = 0;
// Member variable: Hold instance of this class
var thisObject;
// Function: Start the timer
this.Start = function()
{
this.Enable = new Boolean(true);
thisObject = this;
if (thisObject.Enable)
{
thisObject.timerId = setInterval(
function()
{
thisObject.Tick();
}, thisObject.Interval);
}
};
// Function: Stops the timer
this.Stop = function()
{
thisObject.Enable = new Boolean(false);
clearInterval(thisObject.timerId);
};
};
var startValue = 30; // This is the value the counter will start with
var endValue = 200; // This is the value at which the counter will end counting
var obj = new Timer();
obj.Interval = 30;
obj.Tick = timer_tick;
obj.Start();
function timer_tick()
{
startValue = startValue + 1;
document.getElementById("div1").innerHTML = startValue;
if (startValue == endValue)
{
obj.Stop();
}
}
//-->
</script>
<!--
// http://www.dailycoding.com/Posts/object_oriented_programming_with_javascript__timer_class.aspx
// Declaring class "Timer"
var Timer = function()
{
// Property: Frequency of elapse event of the timer in millisecond
this.Interval = 1000;
// Property: Whether the timer is enable or not
this.Enable = new Boolean(false);
// Event: Timer tick
this.Tick;
// Member variable: Hold interval id of the timer
var timerId = 0;
// Member variable: Hold instance of this class
var thisObject;
// Function: Start the timer
this.Start = function()
{
this.Enable = new Boolean(true);
thisObject = this;
if (thisObject.Enable)
{
thisObject.timerId = setInterval(
function()
{
thisObject.Tick();
}, thisObject.Interval);
}
};
// Function: Stops the timer
this.Stop = function()
{
thisObject.Enable = new Boolean(false);
clearInterval(thisObject.timerId);
};
};
var startValue = 30; // This is the value the counter will start with
var endValue = 200; // This is the value at which the counter will end counting
var obj = new Timer();
obj.Interval = 30;
obj.Tick = timer_tick;
obj.Start();
function timer_tick()
{
startValue = startValue + 1;
document.getElementById("div1").innerHTML = startValue;
if (startValue == endValue)
{
obj.Stop();
}
}
//-->
</script>
Weet alleen nog niet hoe ik nu die start en eindwaarde vanuit de database in deze ticker kan stoppen.
Gewijzigd op 19/12/2010 20:38:35 door The Ultimate
Om vanuit javascript de oversteek te maken naar de server, waar de databasewaarden bekend zijn, heb je toch die $.ajax nodig. $.ajax roept een van je functies aan als het resultaat terugkomt. Ik zou het server-script zo laten als in mijn eerste voorstel; de huidige waarde ken je immers in de javascript al. Die moet dan wel ergens blijven.
De sequentie van je applicatie wordt dan zo:
[server] componeer pagina
[browser] toon de eerste totaalwaarde in de relevante html-container (div), sla dat op in (bijvoorbeeld) huidigTotaal
1) per timer (doe maar setTimeout) vraag een totaal aan de server
2) is het verkregen antwoord gelijk aan huidigTotaal? ja -> stap 1
3) zet startValue op huidigTotaal, en endValue op het verkregen antwoord. Geef de ticker een stop-handler(*). Start de ticker.
4) (de stop-handler) ga verder bij 1
Hoe doe je dat, stop-handler? Je Timer roept bij elke tik de functie timer_tick aan; daarin zit een test op de eindconditie. Daaronder moet je dus je stap-1-timeout weer instellen.
Gewijzigd op 19/12/2010 20:50:16 door Bas Cost Budde
Bas Cost Budde op 19/12/2010 20:47:31:
Sorry, dat is niet bewust. Ik probeer het allemaal zo duidelijk mogelijk uit te leggen, maar ik ben zo'n ontiegelijke noob als het om javascript/ajax gaat. Ik kan in javascript nog geen simpele classe schrijven.Aah, stukje bij beetje geef je je requirements prijs.
Bas Cost Budde op 19/12/2010 20:47:31:
Ik zou het server-script zo laten als in mijn eerste voorstel; de huidige waarde ken je immers in de javascript al.
Voor de zekerheid: Je bedoelt dit script:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="counter"></div>
<script type="text/javascript">
window.setInterval(pollServer, 10000);
function pollServer() {
$.get('bedrag_server.php', function(data) {
$('#counter').html(data);
});
}
</script>
<script type="text/javascript">
window.setInterval(pollServer, 10000);
function pollServer() {
$.get('bedrag_server.php', function(data) {
$('#counter').html(data);
});
}
</script>
Bas Cost Budde op 19/12/2010 20:47:31:
Kan ik dan binnen de functie een var aanmaken? En hoe gebruik ik die var dan weer?Die moet dan wel ergens blijven.
Bas Cost Budde op 19/12/2010 20:47:31:
Volgens mij sla je hiermee de spijker op zijn kop. Klopt het dat bij deze opzet het script niet opnieuw controleert op een nieuwe waarde zolang de teller nog loopt?De sequentie van je applicatie wordt dan zo:
[server] componeer pagina
[browser] toon de eerste totaalwaarde in de relevante html-container (div), sla dat op in (bijvoorbeeld) huidigTotaal
1) per timer (doe maar setTimeout) vraag een totaal aan de server
2) is het verkregen antwoord gelijk aan huidigTotaal? ja -> stap 1
3) zet startValue op huidigTotaal, en endValue op het verkregen antwoord. Geef de ticker een stop-handler(*). Start de ticker.
4) (de stop-handler) ga verder bij 1
Hoe doe je dat, stop-handler? Je Timer roept bij elke tik de functie timer_tick aan; daarin zit een test op de eindconditie. Daaronder moet je dus je stap-1-timeout weer instellen.
[server] componeer pagina
[browser] toon de eerste totaalwaarde in de relevante html-container (div), sla dat op in (bijvoorbeeld) huidigTotaal
1) per timer (doe maar setTimeout) vraag een totaal aan de server
2) is het verkregen antwoord gelijk aan huidigTotaal? ja -> stap 1
3) zet startValue op huidigTotaal, en endValue op het verkregen antwoord. Geef de ticker een stop-handler(*). Start de ticker.
4) (de stop-handler) ga verder bij 1
Hoe doe je dat, stop-handler? Je Timer roept bij elke tik de functie timer_tick aan; daarin zit een test op de eindconditie. Daaronder moet je dus je stap-1-timeout weer instellen.
Ik moet dus jouw script en deze teller ineen zien te krijgen en hier en daar tweaken?
Bedankt voor je geduld overigens. Alhoewel ik redelijk kan scripten in php, vind ik dit echt onwijs moeilijk te begrijpen. Heb nog geen flauw idee hoe ik een simpele var kan weergeven. Bedankt alvast.
Gewijzigd op 19/12/2010 20:59:43 door The Ultimate
The Ultimate op 19/12/2010 20:58:45:
Sorry, dat is niet bewust. Ik probeer het allemaal zo duidelijk mogelijk uit te leggen, maar ik ben zo'n ontiegelijke noob als het om javascript/ajax gaat. Ik kan in javascript nog geen simpele classe schrijven.
Bas Cost Budde op 19/12/2010 20:47:31:
Aah, stukje bij beetje geef je je requirements prijs.
Sorry, dat is niet bewust. Ik probeer het allemaal zo duidelijk mogelijk uit te leggen, maar ik ben zo'n ontiegelijke noob als het om javascript/ajax gaat. Ik kan in javascript nog geen simpele classe schrijven.
Dat neem ik je niet kwalijk. Je kunt er wel wat aan doen: stel de technische vragen uit, totdat je een gewone-taal-verhaaltje af hebt dat je aan een van je kinderen zou durven uitleggen.
The Ultimate op 19/12/2010 20:58:45:
Voor de zekerheid: Je bedoelt dit script:
Dat werkte namelijk goed.
Bas Cost Budde op 19/12/2010 20:47:31:
Ik zou het server-script zo laten als in mijn eerste voorstel; de huidige waarde ken je immers in de javascript al.
Voor de zekerheid: Je bedoelt dit script:
Code (php)
1
2
3
2
3
<div id="counter"></div>
<script type="text/javascript">
...
<script type="text/javascript">
...
Dat werkte namelijk goed.
nee, het server-script is php. Hier zit een stukje dat nog geen goede plek in je kennis heeft, zie ik.
The Ultimate op 19/12/2010 20:58:45:
Bas Cost Budde op 19/12/2010 20:47:31:
Kan ik dan binnen de functie een var aanmaken? En hoe gebruik ik die var dan weer?Die moet dan wel ergens blijven.
Niet binnen de functie, want dan heeft hij een te beperkte scope. Op de plek waar je je eerste setTimeout uitvoert, maak je ook de variabele.
The Ultimate op 19/12/2010 20:58:45:
Volgens mij sla je hiermee de spijker op zijn kop. Klopt het dat bij deze opzet het script niet opnieuw controleert op een nieuwe waarde zolang de teller nog loopt?
Bas Cost Budde op 19/12/2010 20:47:31:
De sequentie van je applicatie wordt dan zo:
[server] componeer pagina
[browser] toon de eerste totaalwaarde in de relevante html-container (div), sla dat op in (bijvoorbeeld) huidigTotaal
1) per timer (doe maar setTimeout) vraag een totaal aan de server
2) is het verkregen antwoord gelijk aan huidigTotaal? ja -> stap 1
3) zet startValue op huidigTotaal, en endValue op het verkregen antwoord. Geef de ticker een stop-handler(*). Start de ticker.
4) (de stop-handler) ga verder bij 1
Hoe doe je dat, stop-handler? Je Timer roept bij elke tik de functie timer_tick aan; daarin zit een test op de eindconditie. Daaronder moet je dus je stap-1-timeout weer instellen.
[server] componeer pagina
[browser] toon de eerste totaalwaarde in de relevante html-container (div), sla dat op in (bijvoorbeeld) huidigTotaal
1) per timer (doe maar setTimeout) vraag een totaal aan de server
2) is het verkregen antwoord gelijk aan huidigTotaal? ja -> stap 1
3) zet startValue op huidigTotaal, en endValue op het verkregen antwoord. Geef de ticker een stop-handler(*). Start de ticker.
4) (de stop-handler) ga verder bij 1
Hoe doe je dat, stop-handler? Je Timer roept bij elke tik de functie timer_tick aan; daarin zit een test op de eindconditie. Daaronder moet je dus je stap-1-timeout weer instellen.
Volgens mij sla je hiermee de spijker op zijn kop. Klopt het dat bij deze opzet het script niet opnieuw controleert op een nieuwe waarde zolang de teller nog loopt?
Zo is het. Maar, mijn eerste voorstel ging uit van een doorlopend vragen aan de server, met setInterval. Je kunt beter setTimeout gebruiken; elke keer als de timeout afgaat, heb je namelijk de keus:
- waarde dezelfde? nieuwe timeout zetten
- waarde veranderd? Timer maken, gasmeter-circus starten
The Ultimate op 19/12/2010 20:58:45:
Ik moet dus jouw script en deze teller ineen zien te krijgen en hier en daar tweaken?
Bedankt voor je geduld overigens. Alhoewel ik redelijk kan scripten in php, vind ik dit echt onwijs moeilijk te begrijpen. Heb nog geen flauw idee hoe ik een simpele var kan weergeven. Bedankt alvast.
Bedankt voor je geduld overigens. Alhoewel ik redelijk kan scripten in php, vind ik dit echt onwijs moeilijk te begrijpen. Heb nog geen flauw idee hoe ik een simpele var kan weergeven. Bedankt alvast.
Ja, dat heb je goed. Toch raad ik je aan om altijd je probleem eerst in mensentaal op te schrijven, en dat verhaal dan vanuit machinaal verwerken proberen te lezen. Bij elke stap vraag je je af: heb ik nu genoeg gegevens om deze opdracht uit te voeren?
Pas wanneer het proces duidelijk is, ga je technische oplossingen zoeken.
Voor wat betreft dat server-side/client-side stukje: dat had ik verkeerd gelezen. Ik weet gelukkig wel dat php-serverside is en javascript clientside. Het php-script gebruik ik inderdaad zoals jij mij dit gaf.
Vanavond ga ik me inlezen in het setTimeout gedeelte.
Thanks for your support en tot morgen!
Toevoeging op 20/12/2010 09:24:34:
Ok, ik heb aan een script gewerkt. Dit is tot nu toe het resultaat:
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
70
71
72
73
74
75
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
70
71
72
73
74
75
<html>
<head>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cStart=50;
var t;
var timer_is_on=0;
var cEnd=getEndValue();
function timedCount()
{
document.getElementById('txt').value=cStart; // Waarde in HTML object plaatsen
cStart=cStart+1; // Wat moet er met de waarde gebeuren
if(cStart<=cEnd) // Stoppen wanneer de Timer op cEnd staat
{
// Functie aanroepen (oneindige loop)
t=setTimeout("timedCount()",500);
} else
{
// cEnd opnieuw controleren na 10 seconden
alert('Einde bereikt');
}
}
function doTimer()
{
if (!timer_is_on) // Timer staat uit
{
timer_is_on=1; // Timer aanzetten
timedCount(); // Tellen starten
}
}
function displayStartValue()
{
$.get('get_amount.php', function(data) { $('#startValue').html(data); } );
}
function getEndValue()
{
$.get('get_amount.php',
function(data)
{
// document.getElementById("endValue").innerHTML = data;
endValue = data;
}
);
}
</script>
</head>
<body>
<script type="text/javascript">
// Uitvoeren
window.onload=displayStartValue();
</script>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
<p>De startwaarde is <span id="startValue"></span></p>
<p>De eindwaarde is <span id="endValue"></span></p>
</body>
</html>
<head>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cStart=50;
var t;
var timer_is_on=0;
var cEnd=getEndValue();
function timedCount()
{
document.getElementById('txt').value=cStart; // Waarde in HTML object plaatsen
cStart=cStart+1; // Wat moet er met de waarde gebeuren
if(cStart<=cEnd) // Stoppen wanneer de Timer op cEnd staat
{
// Functie aanroepen (oneindige loop)
t=setTimeout("timedCount()",500);
} else
{
// cEnd opnieuw controleren na 10 seconden
alert('Einde bereikt');
}
}
function doTimer()
{
if (!timer_is_on) // Timer staat uit
{
timer_is_on=1; // Timer aanzetten
timedCount(); // Tellen starten
}
}
function displayStartValue()
{
$.get('get_amount.php', function(data) { $('#startValue').html(data); } );
}
function getEndValue()
{
$.get('get_amount.php',
function(data)
{
// document.getElementById("endValue").innerHTML = data;
endValue = data;
}
);
}
</script>
</head>
<body>
<script type="text/javascript">
// Uitvoeren
window.onload=displayStartValue();
</script>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count forever, starting at 0.</p>
<p>De startwaarde is <span id="startValue"></span></p>
<p>De eindwaarde is <span id="endValue"></span></p>
</body>
</html>
Code (php)
1
endValue = data;
Code (php)
1
cEnd = data;
Merk op dat het een asynchrone oproep is. Het is niet de *functie* getEndValue die de waarde teruggeeft. Voor alle duidelijkheid kun je die beter anders noemen (askEndValue ?)
Haha, super. Dat werkt inderdaad.
Ik denk dat ik teveel in php denk door resultaten als het ware te proberen te echoen maar ik begrijp dat je in javaascript dus telkens de var overschrijft?
Ik heb van getEndValue -> checkEndValue gemaakt.
Nu moet ik nog een functie creeeren die - wanneer de teller niet loopt - om de 10 seconden controleert of de cEnd is veranderd door checkEndValue aan te roepen. Waar denk je dat ik deze functie het beste kan plaatsen? In timedCount(), doTimer() of juist helemaal apart?
EDIT:
Het script is inmiddels zover gevorderd. Helaas zie ik de timer nog niet:
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cStart=timerStartValue();
var t;
//var timer_is_on=0;
var cEnd=timerEndValue();
function startCount()
{
// Beginwaarde en eindwaarde ophalen
timerStartValue();
timerEndValue();
// Timer starten
timedCount();
// Na 10 seconden controleren of de cEnd is gewijzigd.
setTimeout("checkEndValue()",10000);
}
function checkEndValue()
{
// Oude timerEndValue opslaan
cEndOld=cEnd;
// Nieuwe timerEndValue opvragen
timerEndValue();
// Oude en nieuw timerEndValue met elkaar vergelijken
if(cEndOld!=cEnd){
// Teller opnieuw starten
timedCount();
} else {
// Over 10 seconden weer controleren
setTimeout("checkEndValue()",10000);
}
}
function timedCount()
{
document.getElementById('txt').value=cStart; // Waarde in HTML object plaatsen
cStart=cStart+1; // Wat moet er met de waarde gebeuren
if(cStart<=cEnd) // Stoppen wanneer de Timer op cEnd staat
{
// Functie aanroepen (oneindige loop)
t=setTimeout("timedCount()",500);
}
}
function timerStartValue()
{
$.get('get_amount.php',
function(data)
{
cStart = data - 10;
// Beginwaarde tonen
document.getElementById("startValue").innerHTML = cStart;
}
);
}
function timerEndValue()
{
$.get('get_amount.php',
function(data)
{
cEnd = data;
// Eindwaarde tonen
document.getElementById("endValue").innerHTML = data;
}
);
}
</script>
</head>
<body>
<script type="text/javascript">
// Uitvoeren
window.onload=startCount();
</script>
<p>De startwaarde is <span id="startValue"></span></p>
<p>De eindwaarde is <span id="endValue"></span></p>
<p>De timer staat nu op: <span id="txt"></span></p>
</body>
</html>
<head>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cStart=timerStartValue();
var t;
//var timer_is_on=0;
var cEnd=timerEndValue();
function startCount()
{
// Beginwaarde en eindwaarde ophalen
timerStartValue();
timerEndValue();
// Timer starten
timedCount();
// Na 10 seconden controleren of de cEnd is gewijzigd.
setTimeout("checkEndValue()",10000);
}
function checkEndValue()
{
// Oude timerEndValue opslaan
cEndOld=cEnd;
// Nieuwe timerEndValue opvragen
timerEndValue();
// Oude en nieuw timerEndValue met elkaar vergelijken
if(cEndOld!=cEnd){
// Teller opnieuw starten
timedCount();
} else {
// Over 10 seconden weer controleren
setTimeout("checkEndValue()",10000);
}
}
function timedCount()
{
document.getElementById('txt').value=cStart; // Waarde in HTML object plaatsen
cStart=cStart+1; // Wat moet er met de waarde gebeuren
if(cStart<=cEnd) // Stoppen wanneer de Timer op cEnd staat
{
// Functie aanroepen (oneindige loop)
t=setTimeout("timedCount()",500);
}
}
function timerStartValue()
{
$.get('get_amount.php',
function(data)
{
cStart = data - 10;
// Beginwaarde tonen
document.getElementById("startValue").innerHTML = cStart;
}
);
}
function timerEndValue()
{
$.get('get_amount.php',
function(data)
{
cEnd = data;
// Eindwaarde tonen
document.getElementById("endValue").innerHTML = data;
}
);
}
</script>
</head>
<body>
<script type="text/javascript">
// Uitvoeren
window.onload=startCount();
</script>
<p>De startwaarde is <span id="startValue"></span></p>
<p>De eindwaarde is <span id="endValue"></span></p>
<p>De timer staat nu op: <span id="txt"></span></p>
</body>
</html>
Heeft iemand enig idee waarom de <span id="txt"> de timer niet toont?
Gewijzigd op 20/12/2010 10:56:13 door The Ultimate
Je doet er ook goed aan, overigens, de functienamen iets specifieker te maken. Je werkt met twee telcycli: eentje is de wachtlus, die elke 10 seconden een nieuw totaal opvraagt; de andere is de looplus, die het telmechaniek aandrijft.
Breid displayStartValue uit: stop de waarde niet alleen in de html, maar ook in een variabele; en op die plek kun je ook de wacht-teller aanzwengelen (met setTimeout)
De $.get-aanroep naar de server staat nu al twee keer in je code. Je kunt overwegen om die apart te zetten, met een methodenaam als withTotalDo.
Spoiler:
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
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
var currentTotal;
var idleTimeout; // om een gezette timeout te clearen als de teller moet oplopen
$(document).ready(function() {
withTotalDo(showStartValue);
poll();
});
function poll() {
idleTimeout = window.setTimeout(keepPolling, 10000);
}
function keepPolling() {
withTotalDo(rollIfChanged);
poll();
}
function rollIfChanged(data) {
if (data > currentTotal) {
window.clearTimeout(idleTimeout);
// interface naar jouw code:
cStart = currentTotal;
cEnd = data;
doTimer();
// pas de else-tak van jouw timedCount aan:
// daar roep je poll() aan.
}
}
function withTotalDo(func) {
$.get('get_amount.php', func);
}
function showStartValue(data) {
$('#startValue').html(data);
currentTotal = data;
}
var idleTimeout; // om een gezette timeout te clearen als de teller moet oplopen
$(document).ready(function() {
withTotalDo(showStartValue);
poll();
});
function poll() {
idleTimeout = window.setTimeout(keepPolling, 10000);
}
function keepPolling() {
withTotalDo(rollIfChanged);
poll();
}
function rollIfChanged(data) {
if (data > currentTotal) {
window.clearTimeout(idleTimeout);
// interface naar jouw code:
cStart = currentTotal;
cEnd = data;
doTimer();
// pas de else-tak van jouw timedCount aan:
// daar roep je poll() aan.
}
}
function withTotalDo(func) {
$.get('get_amount.php', func);
}
function showStartValue(data) {
$('#startValue').html(data);
currentTotal = data;
}
Toevoeging op 20/12/2010 11:21:13:
Quote:
Heeft iemand enig idee waarom de <span id="txt"> de timer niet toont?
Gebruik jquery, en dan niet meer document.getelementbyid. Maar je probeert nu ook een attribuut van de span te wijzigen! .value is een attribuut. Gebruik .html van jquery.
Ik heb jouw spoiler geprobeerd aan mijn script toe te voegen maar er verandert niets.
Als ik naar jouw spoiler kijk dan begint het me te duizelen voor mijn ogen. Waar ik mijn eigen script enigszins begon te begrijpen, snap ik er echt helemaal niets meer van als ik naar jouw spoiler kijk.
Is het mogelijk om te kijken of we in mijn script van 20/12/2010 09:46:21 een aantal aanpassingen kunnen doen waardoor het gaat werken? Dan kunnen we vervolgens kijken of we het 'netter' kunnen maken. Ik heb om de een of andere reden het idee dat mijn script wel werkend is te krijgen. Of denk jij daar anders over?
Gewijzigd op 20/12/2010 11:54:26 door The Ultimate
$("#startValue").html(cStart);
Over mijn "spoiler": Het is ook lastige materie hoor, twee telcycli, asynchrone oproepen. Blijf vooral kalm.
Eerst werken, dan netjes; dat is een redelijke aanpak, vooropgesteld dat je die tweede stap wel braaf zet.
Bas Cost Budde op 20/12/2010 11:57:44:
Zie mijn hieronder bijgevoegde script. Ik heb overal deze nieuwe benadering toegepast. Het werkt goed voor cStart en cEnd, maar niet voor de #displayCounter. De counter (althans het startgetal) wordt niet in de counter weergegeven. Wat ik heel raar vind.doe een verwijzing naar het id:
$("#startValue").html(cStart);
$("#startValue").html(cStart);
Bas Cost Budde op 20/12/2010 11:57:44:
Ik adem een paar keer diep in en uit...Over mijn "spoiler": Het is ook lastige materie hoor, twee telcycli, asynchrone oproepen. Blijf vooral kalm.
Bas Cost Budde op 20/12/2010 11:57:44:
Als ik het andersom doe dan verlies ik gegarandeerd het overzicht...Eerst werken, dan netjes; dat is een redelijke aanpak, vooropgesteld dat je die tweede stap wel braaf zet.
Ok, dit is dus wat ik tot nog toe heb:
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html>
<head>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cStart;
var t;
//var timer_is_on=0;
var cEnd;
function startCount()
{
// Beginwaarde en eindwaarde ophalen
timerStartValue();
timerEndValue();
timerCounterValue();
// Timer starten
timedCount();
// Na 10 seconden controleren of de cEnd is gewijzigd.
setTimeout("checkEndValue()",10000);
}
function checkEndValue()
{
// Oude timerEndValue opslaan
cEndOld=cEnd;
// Nieuwe timerEndValue opvragen
timerEndValue();
// Oude en nieuw timerEndValue met elkaar vergelijken
if(cEndOld!=cEnd){
// Teller opnieuw starten
timedCount();
} else {
// Over 10 seconden weer controleren
setTimeout("checkEndValue()",10000);
}
}
function timedCount()
{
$("#displayCounter").html(cStart); // Waarde in HTML object plaatsen
cStart=cStart+1; // Wat moet er met de waarde gebeuren
if(cStart<=cEnd) // Stoppen wanneer de Timer op cEnd staat
{
// Functie aanroepen (oneindige loop)
t=setTimeout("timedCount()",1000);
}
}
function timerStartValue()
{
$.get('get_amount.php',
function(data)
{
cStart = data - 10;
// Beginwaarde tonen
$("#startValue").html(cStart);
}
);
}
function timerEndValue()
{
$.get('get_amount.php',
function(data)
{
cEnd = data;
// Eindwaarde tonen
$("#endValue").html(cEnd);
}
);
}
</script>
</head>
<body>
<script type="text/javascript">
// Uitvoeren
window.onload=startCount();
</script>
<p>De startwaarde is <span id="startValue"></span></p>
<p>De eindwaarde is <span id="endValue"></span></p>
<p>De timer staat nu op: <span id="displayCounter"></span></p>
</body>
</html>
<head>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var cStart;
var t;
//var timer_is_on=0;
var cEnd;
function startCount()
{
// Beginwaarde en eindwaarde ophalen
timerStartValue();
timerEndValue();
timerCounterValue();
// Timer starten
timedCount();
// Na 10 seconden controleren of de cEnd is gewijzigd.
setTimeout("checkEndValue()",10000);
}
function checkEndValue()
{
// Oude timerEndValue opslaan
cEndOld=cEnd;
// Nieuwe timerEndValue opvragen
timerEndValue();
// Oude en nieuw timerEndValue met elkaar vergelijken
if(cEndOld!=cEnd){
// Teller opnieuw starten
timedCount();
} else {
// Over 10 seconden weer controleren
setTimeout("checkEndValue()",10000);
}
}
function timedCount()
{
$("#displayCounter").html(cStart); // Waarde in HTML object plaatsen
cStart=cStart+1; // Wat moet er met de waarde gebeuren
if(cStart<=cEnd) // Stoppen wanneer de Timer op cEnd staat
{
// Functie aanroepen (oneindige loop)
t=setTimeout("timedCount()",1000);
}
}
function timerStartValue()
{
$.get('get_amount.php',
function(data)
{
cStart = data - 10;
// Beginwaarde tonen
$("#startValue").html(cStart);
}
);
}
function timerEndValue()
{
$.get('get_amount.php',
function(data)
{
cEnd = data;
// Eindwaarde tonen
$("#endValue").html(cEnd);
}
);
}
</script>
</head>
<body>
<script type="text/javascript">
// Uitvoeren
window.onload=startCount();
</script>
<p>De startwaarde is <span id="startValue"></span></p>
<p>De eindwaarde is <span id="endValue"></span></p>
<p>De timer staat nu op: <span id="displayCounter"></span></p>
</body>
</html>
De beginwaarde (=database SUM - 10) wordt netjes weergegeven en ook de eindwaarde (=database SUM huidig) wordt netjes weergegeven. Waarom is de beginwaarde - 10 vraag je je nu af? Nou, wanneer er een bezoeker op de website komt wil ik dat de teller eerst vanaf SUM-10 naar de SUM toe telt. Zo ziet de bezoeker dat het een dynamische teller is en geen statische. Later (bij livegang) wordt dit vergroot naar SUM -100. Vervolgens moet dus 10 seconden later worden gekeken of er een verandering in de SUM is en de teller weer gaan lopen. Is er geen wijziging in de SUM? Dan over 10 seconden weer checken.
Gewijzigd op 20/12/2010 12:09:39 door The Ultimate