Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

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

5.00/5 (4 votes)
20 Mar 2011CPOL2 min read 17.7K  
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)