Click here to Skip to main content
15,891,993 members
Articles / Web Development / HTML
Alternative
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 (3 votes)
16 Feb 2015CPOL 18.3K   4   4
Essentially the same code snippet with just a little bit cleaner and more efficient code1. setTimeout() is replaced with setInterval() function2. The interval is correctly set to 333 msec to produce 3 updates per second as specifiedRelated application (as FYI): Inflation...
Essentially the same code snippet with just a little bit cleaner and more efficient code

1. setTimeout() is replaced with setInterval() function
2. The interval is correctly set to 333 msec to produce 3 updates per second as specified 
 

JavaScript
<html>
<head>
     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
</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;
 

    $(document).ready(function(){
    // this is called when the page is fully loaded
    // use setInterval() function to update the reading about 3 times a second
     setInterval("updateBurnedMoneyTicker()", 333);
   });
 
    // 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;
        $burnedMoneyElement.html(formatCurrency(totalVal));
    }
 
    // 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></html>

License

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


Written By
Engineer
United States United States
Dr. Alexander Bell (aka DrABell), a seasoned full-stack DevOps and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles, including those popular at CodeProject totaling 4M+ views. Alex pioneered AI/NLP, Cloud development, .NET/Java technology stacks, advanced SQL extensions, HTML5/CSS3 and other important Web technologies; developed multiple award-winning Web/Win apps submitted to App Innovation Contests (AIC 2012/2013). Currently focused on Microsoft Azure Cloud and GitHub Copilot AI-enabled DevOps.

  1. Quiz Engine powered by Azure Cloud (Dev Challenge article)
  2. 'enRoute': Real-time NY City Bus Tracking Web App (IoT on Azure)
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. HTML5/CSS3 graphic enhancement: buttons, inputs
  6. Aggregate Product function extends SQL
  7. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  8. YouTube™ API for ASP.NET

Comments and Discussions

 
GeneralHi Mr. James, Thanks for this clarification. In order to rea... Pin
DrABELL21-Mar-11 6:02
DrABELL21-Mar-11 6:02 
Hi Mr. James,
Thanks for this clarification. In order to reach the specified rate of updates the interval should be set to 333 msec either in setTimeout() or setInterval(). Both functions are widely used, though I try to avoid the unbound recursion pertinent to setTimeout() solution. Using setInterval() is recommended for the repetitive actions, resulting in essentially more robust and. Though I did not explore all intrinsic details, but possibly it implements some logic aimed to stop the execution of the previous cycle prior to starting the next one. But in this particular case both solutions are equally valid.
Best regards, Alex
GeneralReason for my vote of 5 thanks for the review! Pin
TheyCallMeMrJames20-Mar-11 11:26
TheyCallMeMrJames20-Mar-11 11:26 
Generallol...yeah, in the body of the tip i had 333 in there too. i... Pin
TheyCallMeMrJames20-Mar-11 11:25
TheyCallMeMrJames20-Mar-11 11:25 
GeneralRe: Hi Mr. James, Thanks for this clarification. In order to r... Pin
DrABELL21-Mar-11 6:04
DrABELL21-Mar-11 6:04 

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.