Personalizowane kalendarze na prezent!

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="numberWang"></div><div id="procent">+</div><p> <p id="number-text">zadowolonych klientów</p> </div> </code> <style> body { margin: 0; padding: 0; } .number-container { position: absolute; height: 100%; width: 100%; overflow: hidden; text-align: center; color: white; font-family: 'Oswald'; } #numberWang { position: relative; margin: auto; width: 100%; text-align: center; font-size: 60px; font-weight: 700; display: inline; } #number-text { color: white; font-weight: 200; padding: 0px; margin: 0px; font-size: 20px; } #procent { display: inline-block; vertical-align: inherit; font-size: 48px; font-weight: 700; } </style> <script> (function(){ numberWang = { 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 = 999; // Use function numberWang.countUpOrDown('numberWang', 0, userFollowers, 12, "shake", "0.03s", "tada", "2s"); // } // }); })(); </script>

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">takie jakie chcesz</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: 'Oswald'; 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, 120, "shake", "0.03s", "tada", "2s"); // } // }); })(); </script>

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="numberWang2"></div><p> <p id="number-text">dni w roku</p> </div> </code> <style> body { margin: 0; padding: 0; } .number-container { position: absolute; height: 100%; width: 100%; overflow: hidden; text-align: center; color: white; font-family: 'Oswald'; } #numberWang2 { position: relative; margin: auto; width: 100%; text-align: center; font-size: 60px; font-weight: 700; } #number-text { color: white; font-weight: 200; padding: 0px; margin: 0px; font-size: 20px; } </style> <script> (function(){ numberWang2 = { 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 = 365; // Use function numberWang2.countUpOrDown('numberWang2', 0, userFollowers, 33, "shake", "0.03s", "tada", "2s"); // } // }); })(); </script>