Click here to Skip to main content
15,881,600 members
Articles / Web Development / HTML
Tip/Trick

Real-Time Ticker Showing Your Government's Cash Burn Rate

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
20 Mar 2011CPOL2 min read 16.9K   1   3
A fun script to make yourself sick over how much money your government is spending

Why the hate, man?


Here in Canada, income tax season is upon us and we don't much like to think about how quickly the government spends that money that we've been pitching at them.

So I thought to myself, "Hey, self, why not make it seem even worse!" So I set out on a short but enjoyable journey to reveal just how quickly my money evaporates. Yours, too!

This script will work for (or against, depending on your view) any government's burn rate and show visitors to your site the total that they've spent this year. Simply set up an HTML element to display the data and drop in this script.

The Code


Remember to add jQuery to your page:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>


You can, of course, use any CDN you like to get the script on your page.

We need something to display the total in. I used this as a placeholder:
<div id="counter"></div>


Remember that with this script, the entire content of that element is going to be replaced several times a second so you don't want to put any text in there that you want to remain. Note the ID, as we're going to use it in our script.

Next, we'll need to block of some vars that will allow us to make the computations. This will go in the start of a script block.
// capture the date parts we need for the calculation
var currentyear = new Date().getFullYear();
var startDateTicks = new Date(currentyear, 0, 1).getTime();
// replace this with the ID of the element that is used to
// display your burnt money total
var $burnedMoneyElement = $("#counter");
// replace this with your government's annual budget
var governmentBudget = 13265000000;
// figure out the per-second burn rate
var moneyMultiplier = (((governmentBudget / 365) / 24) / 60) / 60;


Beauty, eh? Just update the burnedMoneyElement and the governmentBudget values as required, and we're almost there.

Now (drum roll please) our simple function to do the math:
function updateBurnedMoneyTicker() {
    var curDateTicks = new Date().getTime();
    var totalVal = 0;
    // ticks are in milliseconds, compute by the second
    totalVal = (curDateTicks - startDateTicks);
    totalVal = totalVal / 1000; 
    totalVal = totalVal * moneyMultiplier;
    // update the page about 3 times a second
    $burnedMoneyElement.html(formatCurrency(totalVal));
    setTimeout("updateBurnedMoneyTicker()", 333);
}


setTimeout allows us to ask the browser's JavaScript engine to call a function at a set interval in milliseconds. Because we're calling ourselves here, we've got a recursive function that never ends. Feel free to crank that baby down to 30ms and watch the fury ensue!

You may notice the call to formatCurrency there, that's from our friends over at javascript.internet.com[^] and looks something like this:

function formatCurrency(num) {
    num = num.toString().replace(/\$|\,/g, '');
    if (isNaN(num))
        num = "0";
    sign = (num == (num = Math.abs(num)));
    num = Math.floor(num * 100 + 0.50000000001);
    cents = num % 100;
    num = Math.floor(num / 100).toString();
    if (cents < 10)
        cents = "0" + cents;
    for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
        num = num.substring(0, num.length - (4 * i + 3)) + ',' +
        num.substring(num.length - (4 * i + 3));
    return (((sign) ? '' : '-') + '$' + num + '.' + cents);
}


Actually, it looks exactly like that. I copied and pasted it.

We wire up the page with a simple method call when the page is loaded.
$(function () {
    updateBurnedMoneyTicker();
});


There we are folks! In Manitoba, the government budget is a hefty $13.5 billion. Ouch, and bye-bye pay cheque!

Code Summary, All at Once


Here's all the juice you need, all in one spot.
<head>
</head>
<body>
    <div id="counter"></div>

<script type="text/javascript">
    // capture the date parts we need for the calculation
    var currentyear = new Date().getFullYear();
    var startDateTicks = new Date(currentyear, 0, 1).getTime();

    // replace this with the ID of the element that is used to
    // display your burnt money total
    var $burnedMoneyElement = $("#counter");

    // replace this with your government's annual budget
    var governmentBudget = 13265000000;

    // figure out the per-second burn rate
    var moneyMultiplier = (((governmentBudget / 365) / 24) / 60) / 60;

    // this is called when the page is fully loaded and triggers
    // the update process to begin
    $(function () {
        updateBurnedMoneyTicker();
    });

    // show me the money!!
    function updateBurnedMoneyTicker() {
        var curDateTicks = new Date().getTime();
        var totalVal = 0;
        // ticks are in milliseconds, compute by the second
        totalVal = (curDateTicks - startDateTicks);
        totalVal = totalVal / 1000;
        totalVal = totalVal * moneyMultiplier;
        // update the page about 3 times a second
        $burnedMoneyElement.html(formatCurrency(totalVal));
        setTimeout("updateBurnedMoneyTicker()", 75);
    }

    // this currency formatting function is 
    // from http://javascript.internet.com
    function formatCurrency(num) {
        num = num.toString().replace(/\$|\,/g, '');
        if (isNaN(num))
            num = "0";
        sign = (num == (num = Math.abs(num)));
        num = Math.floor(num * 100 + 0.50000000001);
        cents = num % 100;
        num = Math.floor(num / 100).toString();
        if (cents < 10)
            cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' +
            num.substring(num.length - (4 * i + 3));
        return (((sign) ? '' : '-') + '$' + num + '.' + cents);
    } // end of code from http://javascript.internet.com
</script>
</body>


Enjoy!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Canada Canada
For almost 30 years I have been working with computers, learning a myriad of languages and participating in various computing environments.

Though I have been mentoring other developers for the last decade, I have recently found a strong interest in writing and am learning to translate the fun of in-person teaching to something I can get into article form.

I enjoy following technology trends, new gadgets and trying to guess where innovation will lead us next (I'm kinda holding out for a robot-served utopia, but willing to submit to our future robot leaders).

I am a guy who is passionate about my faith, my family and a cure for Juvenile Diabetes (my son lives with this disease).

Comments and Discussions

 
GeneralReason for my vote of 5 Nice one dude. BTW take care of your... Pin
thatraja15-Jan-12 19:08
professionalthatraja15-Jan-12 19:08 
GeneralThanks for the touch-ups Deeksha! Pin
TheyCallMeMrJames20-Mar-11 11:41
TheyCallMeMrJames20-Mar-11 11:41 
GeneralReason for my vote of 5 Interesting app! :) Pin
DrABELL20-Mar-11 9:57
DrABELL20-Mar-11 9:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.