this javascript counts-up. But it has no CSS for font type and size and color. I need that CSS. Also, the initial number starts out as 0. But I want the initial number to start at a larger number. ie: 12434556. Please assist me. Thank you.
<div class='countdown'></div>
<script type="text/javascript">
function pad(num, size) {
var s = num + "";
while (s.length < size) s = "0" + s;
return s;
}
function initCountdown() {
setTimeout(function() {
current_wait++;
if (current_wait <= waits.length) {
var countdowns = document.getElementsByClassName('countdown');
for (var i = 0; i < countdowns.length; i++) {
var number = parseInt(countdowns[i].innerHTML);
number++;
countdowns[i].innerHTML = pad(number, 2);
window.localStorage.setItem('_setCountdownTimer', JSON.stringify({'initial_number': number, 'current_wait': current_wait}))
}
initCountdown();
}
}, waits[current_wait] * 1000);
}
var waits = [8, 16, 19, 26, 44, 66, 88, 99, 121]; //t-val
var _locatStorage = JSON.parse(window.localStorage.getItem('_setCountdownTimer')), initial_number = 0, current_wait = 0;
_locatStorage ? (
initial_number = parseInt(_locatStorage.initial_number),
current_wait = parseInt(_locatStorage.current_wait)
):(
window.localStorage.setItem('_setCountdownTimer', JSON.stringify({'initial_number': 0, 'current_wait': 0})),
initial_number = 0,
current_wait = 0
)
var countdowns = document.getElementsByClassName('countdown');
for (var i = 0; i < countdowns.length; i++) {
countdowns[i].innerHTML = pad(initial_number, 2);
}
initCountdown();
</script>
Adding CSS is simple - you can add it inline in the div tag like this
<div
class="countdown"
style="
font-size: 6em;
font-family: 'Courier New', Courier, monospace;
color: red;
font-weight: 800;
"
></div>
or you could add a style tag right before your <script> tag like this
<style>
.countdown {
font-size: 6em;
font-family: 'Courier New', Courier, monospace;
color: red;
font-weight: 800;
}
</style>
Also, you have used initial_number a bunch of times in the code. When you do that, it is always a good idea to define a variable at the very top and use its value in your code.
const INIT_NUM = 2335343234;
function initCountdown() {
setTimeout(function () {
current_wait++;
if (current_wait <= waits.length) {
var countdowns = document.getElementsByClassName('countdown');
for (var i = 0; i < countdowns.length; i++) {
var number = parseInt(countdowns[i].innerHTML);
number++;
countdowns[i].innerHTML = pad(number, 2);
window.localStorage.setItem(
'_setCountdownTimer',
JSON.stringify({
initial_number: number,
current_wait: current_wait,
})
);
}
initCountdown();
}
}, waits[current_wait] * 1000);
}
var waits = [8, 16, 19, 26, 44, 66, 88, 99, 121]; //t-val
var _locatStorage = JSON.parse(
window.localStorage.getItem('_setCountdownTimer')
),
initial_number = INIT_NUM,
current_wait = 0;
_locatStorage
? ((initial_number = parseInt(_locatStorage.initial_number)),
(current_wait = parseInt(_locatStorage.current_wait)))
: (window.localStorage.setItem(
'_setCountdownTimer',
JSON.stringify({ initial_number: INIT_NUM, current_wait: 0 })
),
(initial_number = INIT_NUM),
(current_wait = 0));
Also make sure that when you use this new code, you clear your local storage, otherwise you will always be using the old value
You can clear the value by typing this in your browser's dev console
window.localStorage.removeItem('_setCountdownTimer');
You can find the demo here