To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu.
Kliknij dwa razy, aby edytować
<code>
<div class="number-container">
<p><div id="numberWang3"></div><div id="procent">%</div><p>
<p id="number-text">satysfakcji</p>
</div>
</code>
<style>
body {
margin: 0;
padding: 0;
}
.number-container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
text-align: center;
font-size: 1.6em;
font-family: "Open Sans", Arial, sans-serif;
font-style: normal;
color: white;
}
#numberWang3 {
position: relative;
margin: auto;
width: 100%;
text-align: center;
font-size: 60px;
color: white;
font-weight: 700;
display: inline;
}
#number-text {
color: white;
font-weight: 300;
padding: 0px;
margin: 0px;
font-size: 20px;
}
#procent {
display: inline-block;
vertical-align: inherit;
font-size: 60px;
font-weight: 700;
}
</style>
<script>
(function(){
numberWang3 = {
countUpOrDown: function(containerid, startingNumber, endingNumber, betweenNumberDuration, betweenEffect, effectDuration, endingEffect, endingEffectDuration) {
// Required parameters
var divPlaceholder = document.getElementById(containerid);
var fixedStartingNumber = parseInt(startingNumber.toFixed(0)) + 1;
var fixedEndingNumber = parseInt(endingNumber.toFixed(0)) + 1;
// Optional parameters
betweenNumberDuration = betweenNumberDuration || 20;
betweenEffect = betweenEffect || "jello";
effectDuration = effectDuration || "0.1s";
endingEffect = endingEffect || "tada";
endingEffectDuration = endingEffectDuration || "1s";
// if both numbers ARE numbers
if (isNaN(startingNumber, endingNumber)) {
console.log('both starting and ending numbers are not integars!');
return false;
} else {
if(fixedStartingNumber < 0){
divPlaceholder.innerHTML = fixedStartingNumber-1;
} else {
divPlaceholder.innerHTML = fixedStartingNumber;
}
if(fixedEndingNumber < 0){
var fixedEndingNumber = parseInt(endingNumber.toFixed(0)) - 1;
} else {
var fixedEndingNumber = parseInt(endingNumber.toFixed(0)) + 1;
}
if(fixedStartingNumber > fixedEndingNumber) {
function updateToEndNumber() {
divPlaceholder.style.animationDuration = effectDuration;
divPlaceholder.setAttribute("class", betweenEffect + " animated infinite");
divPlaceholder.innerHTML = fixedStartingNumber--;
if(fixedStartingNumber == fixedEndingNumber) {
clearInterval(clearCountTimer);
clearCountTimer = 0;
divPlaceholder.style.animationDuration = endingEffectDuration;
divPlaceholder.setAttribute("class", endingEffect + " animated");
}
}
var clearCountTimer = setInterval(updateToEndNumber, betweenNumberDuration);
} else if(fixedStartingNumber < fixedEndingNumber) {
function updateToEndNumber() {
divPlaceholder.style.animationDuration = effectDuration;
divPlaceholder.setAttribute("class", betweenEffect + " animated infinite");
divPlaceholder.innerHTML = fixedStartingNumber++;
if(fixedStartingNumber == fixedEndingNumber) {
clearInterval(clearCountTimer);
clearCountTimer = 0;
divPlaceholder.style.animationDuration = endingEffectDuration;
divPlaceholder.setAttribute("class", "" + endingEffect + " animated");
}
}
var clearCountTimer = setInterval(updateToEndNumber, betweenNumberDuration);
} else if(fixedStartingNumber == fixedEndingNumber) {
clearInterval(clearCountTimer);
clearCountTimer = 0;
divPlaceholder.style.animationDuration = endingEffectDuration;
divPlaceholder.setAttribute("class", "" + endingEffect + " animated");
}
}
}
}
// End of function
var userFollowers = 100;
// Use function
numberWang3.countUpOrDown('numberWang3', 0, userFollowers, 100, "shake", "0.03s", "tada", "2s");
// }
// });
})();
</script>
