Hallo,
Ich würde gerne einen Live-Counter in meiner Website erstellen.
Er sollte z.B. von 0 auf 500 zählen und die Besucher sollen die Steigerung direkt sehen.
Die Werte sollen fix hinterlegt sein.
Ich steh zurzeit auf dem Schlauch und weiss gar nicht wie beginnen oder sonst was.
Hab leider noch keine Erfahrung mit einer solchen Aufgabe getätigt.
Bitte um Hilfestellung 
Danke und Gruss
hunny design
Live? Wenn Du oder irgendetwas den Wert ändert, dann soll es live auf der Webseite aktualisiert werden?
Da fallen mir 2 Sachen ein:
Ajax call alle n Sekunden,
oder websocket.
Websocket ist aber evtl overkill.
Daher empfehle ich den ajax call.
Bsp:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function doAjax() {
$.ajax({
type: 'GET',
url: 'path/to/url', /* hier die daten url reingehauen */
success: function (data) {
$("#counter").html(data);
},
complete: function (data) {
// Schedule the next
setTimeout(doAjax, interval);
}
});
}
var interval = 1000; // 1000 = 1 second, 3000 = 3 seconds
$(document).ready(function () {
setTimeout(doAjax, interval);
});
</script>
</head>
<body>
<h1>Test</h1>
<div id="counter">0</div>
</body>
</html>data.php
<?php
echo rand(0, 11111);Ajax Bsp von hier genutzt: https://stackoverflow.com/a/20371831/3411766
Alles anzeigenLive? Wenn Du oder irgendetwas den Wert ändert, dann soll es live auf der Webseite aktualisiert werden?
Da fallen mir 2 Sachen ein:
Ajax call alle n Sekunden,
oder websocket.
Websocket ist aber evtl overkill.
Daher empfehle ich den ajax call.
Bsp:
index.html
HTMLAlles anzeigen<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript"> function doAjax() { $.ajax({ type: 'GET', url: 'path/to/url', /* hier die daten url reingehauen */ success: function (data) { $("#counter").html(data); }, complete: function (data) { // Schedule the next setTimeout(doAjax, interval); } }); } var interval = 1000; // 1000 = 1 second, 3000 = 3 seconds $(document).ready(function () { setTimeout(doAjax, interval); }); </script> </head> <body> <h1>Test</h1> <div id="counter">0</div> </body> </html>data.php
PHP<?php echo rand(0, 11111);
Ajax Bsp von hier genutzt: https://stackoverflow.com/a/20371831/3411766
Vielen Dank für deine Hilfe, ich glaube jedoch ist dies nicht genau das wonach ich suche..
Ich möchte auf meiner Site meine "Abgeschlossenen Projekte" anzeigen sagen wir z.b. 20.
Wenn der Besucher nun auf meine Site kommt und in den Bereich scrollt (OnePage) soll die Zahl von 0 auf 20 springen aber die Schritte von 0-20 sollen ersichtlich sein.
Ist dies Verständlich?
Danke und Gruss
hunny design
Aso.
Also 20 Projekte per Seite. Das aber auf der OnePage per scroll getriggert?
Meine Seite ... [20 Projekte]
.
.
.
Meine Seite ... [40 Projekte]
.
.
.
Meine Seite ... [60 Projekte]Das sollte sogar per css only funktionieren.
Aber das ist nicht meine Welt. Wird aber sicherlich hier jemand wissen.
Alles anzeigenAso.
Also 20 Projekte per Seite. Das aber auf der OnePage per scroll getriggert?
CodeMeine Seite ... [20 Projekte] . . . Meine Seite ... [40 Projekte] . . . Meine Seite ... [60 Projekte]
Das sollte sogar per css only funktionieren.
Aber das ist nicht meine Welt. Wird aber sicherlich hier jemand wissen.
Nein auch nicht so gemeint.
Unter hunny.ch/hunnydesign kannst du sehen was ich bis jetzt erreicht habe. (Ist unter "Home" zu finden)
Leider zählt er nun bereits hoch wenn man die Seite besucht ohne das man den Bereich sieht.
Ich will aber, dass erst hochgezählt wird wenn der Besucher auch in dem Bereich ist.
Hoffe auf Hilfe
Ah, meinst du, dass z.B. die 500 bei investierte Stunden hochgezählt werden soll, sobald sich dies im Viewport befindet?
Das würde nur mit JS gehen.
Ah, meinst du, dass z.B. die 500 bei investierte Stunden hochgezählt werden soll, sobald sich dies im Viewport befindet?
Das würde nur mit JS gehen.
Genau das mein ich.
Habe bereits ein kleines Script drin wo das ganze Hochzählt. Nun muss ich es noch irgendwie hinbringen, dass es nur ausgeführt wird wenn es sich im Viewport befindet.
Kannst du mir da helfen?
Habe eigentlich auch keine Ahnung von JS. Werde aber mal gucken, was sich machen lässt...
Edit:
Wow, habe es sogar ohne allzu viel zu googeln mithilfe von jQuery hinbekommen. Hier ist es: https://codepen.io/jr-cologne/pen/GEEJKb
Das Ganze musst du jetzt natürlich noch in deinen Anwendungsfall integrieren.
Ich hoffe, du bestehst nicht auf eine pure JS-Lösung. Weil dann wüsste ich definitiv nicht mehr weiter, ohne es selber ausführlich nachzuschauen. 
Ach sowas
Das gibts doch Haufenweise.
Hier zB css only: http://www.daymedia.co.uk/blog…animated-counter-in-css3/
oder einfach eins aussuchen - such mal nach "counter animation on scroll down"
Ja, ok. Das hochzählen geht mit CSS. Der Rest aber nicht.
Und dann kann man eigentlich gleich auf JS setzen...
Und dann kann man eigentlich gleich auf JS setzen...
Sollte man für solche Sachen sowieso. CSS ist nicht dafür gedacht Userinput zu verarbeiten und in der Hinsicht auch deutlich weniger performant. Mobile Surfer danken für jede Zeile JS, die CSS Spielereien ersetzt.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
