GoGreen PC TuneUp™
Learn More

Insta-Install™
this is how we code sign our software and ssl encrypt our websites from our affiliate partner SSL.com

myBlog

myBlog Home

Back to Blog MTNCOMP


Javascript to simulate run up counter up of Blog Entries

by Andy Flagg, Publication Date: Saturday, July 4, 2020
View Count: 283, Keywords: Javascript, SetInterval, ClearInterval , readTextFile, onLoad, Hashtags: #Javascript #SetInterval #ClearInterval #readTextFile #onLoad



 
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).
 
            <DIV id="myBlogCount">0</DIV>
 
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.
 
Here is the sample code that just works - click here - https://mountaincomputers.org to see the lower left corner of my home page that uses this..
 
<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...
 
 

if you found this article helpful, consider contributing $10, 20 an Andrew Jackson or so..to the author. more authors coming soon
FYI we use paypal or patreon, patreon has 3x the transaction fees, so we don't, not yet.

© 2020 myBlog™ v1.1 All rights reserved. We count views as reads, so let's not over think it.