Skip to content

Instantly share code, notes, and snippets.

@rafszul
Created October 27, 2018 10:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rafszul/c7517bff9fc35e93ea50cc3262038468 to your computer and use it in GitHub Desktop.
Save rafszul/c7517bff9fc35e93ea50cc3262038468 to your computer and use it in GitHub Desktop.
counter
<body onload="incrementCount(10)">
<div class="main_container" id="id_main_container">
<div class="container_inner" id="display_div_id">
</div>
</div>
</body>
var counter_list = [0,542,57];
var str_counter_0 = counter_list[0];
var str_counter_1 = counter_list[1];
var str_counter_2 = counter_list[2];
var display_str = "";
var display_div = document.getElementById("display_div_id");
function incrementCount(current_count){
setInterval(function(){
// clear count
while (display_div.hasChildNodes()) {
display_div.removeChild(display_div.lastChild);
}
str_counter_0++;
if (str_counter_0 > 9) {
str_counter_0 = 0; // reset count
str_counter_1++; // increase next count
}
if(str_counter_1>99999){
str_counter_2++;
}
display_str = str_counter_2.toString() + str_counter_1.toString() + str_counter_0.toString();
for (var i = 0; i < display_str.length; i++) {
var new_span = document.createElement('span');
new_span.className = 'num_tiles';
new_span.innerText = display_str[i];
display_div.appendChild(new_span);
}
},100);
}
.main_container {
height: 115px;
width: 510;
padding: 30px;
margin: 0px;
/* max-width: 300px; */
background-color: #081C38;
align-content: center;
}
.container_inner {
height: auto;
border: none;
background-color: #081C38;
/* max-width: 290px; */
vertical-align: center;
padding-top: 82px;
padding-left: 100px;
align-content: center;
}
.num_tiles {
/* width:50px;
height: 50px; */
background-color: #39495F;
color: #ffffff;
font-size: 32px;
text-align: center;
line-height: 20px;
padding: 3px;
margin: 1.5px;
font-family: Roboto;
vertical-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment