I have seen some really cool websites that on page load and show,
they portrary counters of how much of this and that they have
accomplished. How many clients, how many deploys, how many problems
solved, how many this that and the other...
So, I wanted to add a count up runner up of the number of Blog entries on my Home Page. So from scratch... I figured it out...
1. you need a target location on your website for the counter(s)
2. you need a Javascript timer function
3. you need a source of the count that is automatically or manually maintained
4. you need a little code to read the value of the count and then set the timer alert, spin up the value and display it
5. you need to kill the timer when the count is reached.
let me explain the code and how I started it earlier today from scratch and made the pieces work for me...
some new developments in SEO meta tags... now the META CHARSET for
language has to be within the first 1024 bytes of your html file.
<META charset="UTF-8">
If you have never looked at the console log in your browser, you
should, especially in Firefox. Just hold down these keys and press them
together. CTLR+SHIFT+C to bring up the console and you can look at the
Warnings, Output and other items like XHR and what your browser is
processing as your page loads. Now back to the JavaScript code.
So you need the BODY ONLOAD feautre to kick start your timer. I
have tried to let the page load inline JavaScript do this but with
limited success. I have to refresh the page once or twice before the
counter starts and runs up. So just use the BODY ONLOAD feature to call
your JavaScript timer start.
<BODY onload="fStartTimer();">
Then you can have the timer get it's first value reading a text
file with one line in it with your counter value. Just a flat text file
with your final count in it.
Read the file and you need the Async set to TRUE instead of False
per the other examples online, otherwhise you get an XHR error/warning
of a deprecated feature issue... then start the time, and let the
time be relative to processor speed and test it for 40, 50, 60 or 70
milliseconds to count up, and don't count up one number at a time,
otherwise it will take forever, so just set your step or increment value
to be relative to your overall count. For me, nearly 1000 blog entries
when I realized to do this, my step count was like 22 and you have to
stop the timer within that limit step near the final count +/- that step
count value plus a few.
For me, I chose 25 as the comparison great
value of the existing count stepping at 22. When you reach the timer
final count you have to clear the timer. Updating your page with the
value is just as important so use the DIV tag with your ID and use the
document getElementById innerHTML feature to get your count into that
area. Set the default value to 0 on your page as well, and of course,
always set your variables to their initial value and don't trust value
corruption or inject insertion from tee commands (if you know what that
is, or maybe that does not matter any more... it's been like 20 years
since I coded tee windows).
So the JavaScript below can be just about anywhere, preferably in
the HEAD of the page and since you are using ONLOAD you can get away
without having the inline let start timer sometimes work and sometimes
not. it just depends. now if your timer is on a start stop button then
onload won't matter. for me, the page loads and then the timer runs up
the count on the screen to show how many of this that and the other I
have been working on, like myBlog and myVlog. I'll update this to
include the myVlog value soon as well.
<script type="text/javascript">
var timerId;
var mycount = 0;
var finalvalue = 0;
readTextFile("myBlog/myBlogCount.txt");
// repeat with the interval of 50 milliseconds
function fStartTimer() {
let timerId = setInterval(() => fupdate(), 50);
}
function fupdate() {
document.getElementById("myBlogCount").innerHTML = mycount;
//console.log (mycount);
mycount = mycount + 22;
if (mycount > (finalvalue - 25)) {
document.getElementById("myBlogCount").innerHTML = finalvalue;
clearInterval(timerId);
}
}
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
finalvalue = allText;
}
}
}
rawFile.send(null);
}
</script>
more to come...
