Bis zu einer bestimmten Zahl hochzählen
Hallo zusammen,
für die Homepage unseres Vereins suche ich die Möglichkeit bin zu einer Zahl hochzuzählen. Es geht darum darzustellen, wie viele Personen sich für eine Veranstaltung angemeldet haben.
Die Anmeldezahl bekommen wir von einem externen Anbieter, der die Anmeldungen abwickelt. Er übergibt uns diese Zahl über seine API als URL. Mit der php-Funktion file_get_contents bekomme ich die Zahl auch ausgegeben.
Kann mir jemand helfen, wie ich das Hochzähl-Javascript mit der php-Funktion kombiniere und bis zu der Zahl aus der Variable $anmeldungen hochzähle?
<?php
$anmeldungen = file_get_contents('https://api.raceresult.com/132677/2LOCB05PVRFATRGW2L3Y9V6B3Z6NB1SE');
echo $anmeldungen;
?>
Der hier verwendete Code
<style>
.sprocket-tables-item {border: 1px solid #ededed;}
.sprocket-tables-cell {border-bottom: 1px solid #ededed;}
.sprocket-tables-bg1 {background: #fdfdfd;}
.sprocket-tables-bg2 {background: #f0f0f0;}
.sprocket-tables-link .readon {background: #888;color: #fff;}
.sprocket-tables-link .readon:hover {background: #333;}
.sprocket-tables-pagination li {background: #000;color: #fff;}
.sprocket-tables-arrows .arrow {background: #ccc;color: #222;border-color: #303030;}
/* Sprocket Tables - Core */
.sprocket-tables {position: relative;}
.sprocket-tables:after {display: table;content: "";*zoom: 1;clear: both;}
.sprocket-tables-container {list-style: none !important;overflow: hidden;padding: 0;margin: 0 -1%;}
.sprocket-tables-container:before, .sprocket-tables-container:after {content: "";display: table;line-height: 0;}
/* Sprocket Tables - Items */
.sprocket-tables-item {background-size: cover;border-radius: 2px;}
.sprocket-tables-title {margin-top: 0;font-size: 1.8em;}
.sprocket-tables-text {display: block;}
.sprocket-tables-block {display: inline-block;vertical-align: top;margin: 1% -4px 1% 0;text-align: center;box-sizing: border-box;padding: 0 1%;}
.cols-1 .sprocket-tables-block {width: 100%;}
.cols-2 .sprocket-tables-block {width: 50%;}
.cols-3 .sprocket-tables-block {width: 33.33%;}
.cols-4 .sprocket-tables-block {width: 25%;}
.cols-5 .sprocket-tables-block {width: 20%;}
.cols-6 .sprocket-tables-block {width: 16.6667%;}
.sprocket-tables-cell {display: block;padding: 15px;}
.sprocket-tables-cell:last-child {border-bottom: 0;}
.sprocket-tables-price {font-size: 2.2em;font-weight: bold;padding: 20px 15px;}
.sprocket-tables-feature {font-size: 1.1em;}
.sprocket-tables-link .readon {padding: 6px 10px;border-radius: 4px;}
@media (min-width: 481px) and (max-width: 767px) {
.sprocket-tables-container .sprocket-tables-block {width: 50%;}
}
@media (max-width: 480px) {
.sprocket-tables-container .sprocket-tables-block {width: 100%;float: none;margin-bottom: 15px;}
}
/* Sprocket Tables - Navigation */
.sprocket-tables-nav {display: table;width: 100%;padding: 5px;}
.sprocket-tables-pagination {display: table-cell;vertical-align: middle;}
.sprocket-tables-pagination ul {float: left;margin: 0 !important;padding: 0 !important;}
.sprocket-tables-pagination li {display: inline-block;padding: 4px !important;opacity: 0.3;border-radius: 1em;cursor: pointer;}
.sprocket-tables-pagination li.active {opacity: 1;}
.sprocket-tables-pagination li span {display: none;font-size: 0.85em;line-height: 1em;}
.sprocket-tables-pagination-hidden {display: none;}
.sprocket-tables-arrows {display: table-cell;vertical-align: middle;}
.sprocket-tables-arrow ul {float: right;margin: 0 !important;padding: 0 !important;}
.sprocket-tables-arrows .arrow {display: block;width: 22px;height:22px;border-radius: 1em;opacity: 0.7;cursor: pointer;float: right;margin-left: 5px;text-align: center;font-size: 2em;position: relative;}
.sprocket-tables-arrows .arrow:hover {opacity: 1;}
.sprocket-tables-arrows .arrow:before {content: '';width: 0;height: 0;position: absolute;top: 50%;margin-top: -5px;border-top: 5px solid transparent;border-bottom: 5px solid transparent;}
.sprocket-tables-arrows .prev:before {left: 50%;margin-left: -3px;border-right: 5px solid;}
.sprocket-tables-arrows .next:before {right: 50%;margin-right: -3px;border-left: 5px solid;}
/* Sprocket Tables - Spinner */
.sprocket-tables-overlay {display: none;position: absolute;margin-top: -66px;top:50%;left:0;right:0;bottom:0;background-color:transparent;z-index:5;}
.sprocket-tables-overlay .css-loader-wrapper {width: 60px;height:60px;margin: 0 auto;padding: 20px;background-color: rgba(0, 0, 0, 0.7);box-shadow:0 0 5px rgba(0, 0, 0, 0.4) inset,1px 1px 1px rgba(255, 255, 255, 0.1);border-radius:1em;}
.sprocket-tables.loading .sprocket-tables-overlay {display: block;}
.sprocket-tables-overlay .css-loader {display: block;margin: 0 auto;font-size: 10px;position: relative;text-indent: -9999em;border-top: 8px solid rgba(255, 255, 255, 0.2);border-right: 8px solid rgba(255, 255, 255, 0.2);border-bottom: 8px solid rgba(255, 255, 255, 0.2);border-left: 8px solid #ffffff;-webkit-animation: loader 1.1s infinite linear;animation: loader 1.1s infinite linear;}
.sprocket-tables-overlay .css-loader {border-radius: 50%;width: 44px;height: 44px;}
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<div class="sprocket-tables" data-tables="316">
<div class="sprocket-tables-overlay"><div class="css-loader-wrapper"><div class="css-loader"></div></div></div>
<ul class="sprocket-tables-container cols-4" data-tables-items="">
<div class="sprocket-tables-block" data-tables-item="">
<div class="sprocket-tables-item" data-tables-content="">
<div class="sprocket-tables-desc sprocket-tables-cell sprocket-tables-bg1">
<h4 class="sprocket-tables-title" data-tables-toggler="">
<a href="/anmeldung"> 25 km<br><br>Laufen </a> </h4>
</div>
<span class="sprocket-tables-price sprocket-tables-cell sprocket-tables-bg2">
<span id="counter0">107</span> </span>
<span class="sprocket-tables-feature sprocket-tables-cell sprocket-tables-bg1">
<p><a href="/strecken/hochsauerlandlauf-25km">Alle Informationen</a></p> </span>
<div class="sprocket-tables-link sprocket-tables-cell sprocket-tables-bg1">
<a href="/anmeldung" class="readon">Ich will auch dabei sein!</a>
</div>
</div>
</div>
<div class="sprocket-tables-block" data-tables-item="">
<div class="sprocket-tables-item" data-tables-content="">
<div class="sprocket-tables-desc sprocket-tables-cell sprocket-tables-bg1">
<h4 class="sprocket-tables-title" data-tables-toggler="">
<a href="/anmeldung"> 11 km<br><br>Laufen </a> </h4>
</div>
<span class="sprocket-tables-price sprocket-tables-cell sprocket-tables-bg2">
<span id="counter1">80</span> </span>
<span class="sprocket-tables-feature sprocket-tables-cell sprocket-tables-bg1">
<p><a href="/strecken/hochsauerlandlauf-nordic-walking-11km">Alle Informationen</a></p> </span>
<div class="sprocket-tables-link sprocket-tables-cell sprocket-tables-bg1">
<a href="/anmeldung" class="readon">Ich will auch dabei sein!</a>
</div>
</div>
</div>
<div class="sprocket-tables-block" data-tables-item="">
<div class="sprocket-tables-item" data-tables-content="">
<div class="sprocket-tables-desc sprocket-tables-cell sprocket-tables-bg1">
<h4 class="sprocket-tables-title" data-tables-toggler="">
<a href="/anmeldung"> 11 km<br><br>Nordic-Walking </a> </h4>
</div>
<span class="sprocket-tables-price sprocket-tables-cell sprocket-tables-bg2">
<span id="counter2">6</span> </span>
<span class="sprocket-tables-feature sprocket-tables-cell sprocket-tables-bg1">
<p><a href="/strecken/hochsauerlandlauf-nordic-walking-11km">Alle Informationen</a></p> </span>
<div class="sprocket-tables-link sprocket-tables-cell sprocket-tables-bg1">
<a href="/anmeldung" class="readon">Ich will auch dabei sein!</a>
</div>
</div>
</div>
<div class="sprocket-tables-block" data-tables-item="">
<div class="sprocket-tables-item" data-tables-content="">
<div class="sprocket-tables-desc sprocket-tables-cell sprocket-tables-bg1">
<h4 class="sprocket-tables-title" data-tables-toggler="">
<a href="/anmeldung"> 3 km<br><br>Laufen </a> </h4>
</div>
<span class="sprocket-tables-price sprocket-tables-cell sprocket-tables-bg2">
<span id="counter3">58</span> </span>
<span class="sprocket-tables-feature sprocket-tables-cell sprocket-tables-bg1">
<p><a href="/strecken/hochsauerlandlauf-3km">Alle Informationen</a></p> </span>
<div class="sprocket-tables-link sprocket-tables-cell sprocket-tables-bg1">
<a href="/anmeldung" class="readon">Ich will auch dabei sein!</a>
</div>
</div>
</div>
</ul>
<div class="sprocket-tables-nav">
<div class="sprocket-tables-pagination-hidden">
<li class="active" data-tables-page="1"><span>1</span></li>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var js_array = ["107","80","6","58"];
maxarray=Math.max.apply(null, js_array);
var counterlaufzeit = 5000;
i = 0;
function start(i) {
const ms = counterlaufzeit/maxarray;
if (i < maxarray) {
setTimeout(function() {
i++
document.getElementById('counter0').innerHTML = (js_array[0]/maxarray*i).toFixed(0);
document.getElementById('counter1').innerHTML = (js_array[1]/maxarray*i).toFixed(0);
document.getElementById('counter2').innerHTML = (js_array[2]/maxarray*i).toFixed(0);
document.getElementById('counter3').innerHTML = (js_array[3]/maxarray*i).toFixed(0);
start(i)
}, ms.toFixed(2));
}
}
start(i)
})
</script>