Increment + auto-update variable value in JS

Question

I'm a beginner at JS and PHP, so please forgive my ignorance and bear with me :)

I'm trying to implement a live counter on my website. This counter should display the number of translated words up to now, and I'd like this number to update "live" to reflect the number of translated words (based on my yearly average).

To simplify, I set a variable $wordsPerYear with an average of words translated per year, say 1,000. I also set the start date to 10 years ago (2004), so that it returns roughly 10,000.

So here's my code so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Live Word Count</title>
    <style type="text/css">
    .count {
        width: 100%;
        margin: 0 auto;
        padding-top: 10%;
        text-align: center;
    }
    </style>
    <?php
    $now = time();
    $start = mktime(0, 0, 0, 1, 01, 2004);
    $wordsPerYear = 1000;
    $totalDays = (($now - $start) / 86400); // number of a seconds in a day
    $count = $totalDays / 365 * $wordsPerYear;
    $count = round($count);
    ?>

    <script type="text/javascript">
        var totalWords = <?php print($count); ?>;
        function updateCounter() {
            totalWords = totalWords + 1; // need to do something here to update to the real word count instead of incrementing by 1 each second
            document.getElementById("carb").innerHTML=totalWords; }
    </script>
</head>

<body onload="setInterval('updateCounter()', 1000);">
    <div class="count">
            <span id="carb">
                Loading Word Count...
            </span>
    </div>
</body>
</html>

I just need to be able to make this figure update "live" with the real value of words translated instead of a "fake" live incrementation using setInterval('updateCounter()', 1000).

So yeah, I really just need to update the function to update that word count value to the ratio of the current time against my start date.

Could anyone help me achieve this? I'm sure it's something really simple to do but I'm racking my brains to no avail. Let me know if clarifications are needed to explain what I want to do!

Thanks in advance

Answer 1

There's no need for both PHP and Javascript for this, since you're not actually getting any values from your server - it's all being calculated in a vacuum.

Fundamentally, this is a math problem. Javascript calculates the differences in dates in milliseconds, so you first need to know the number of words per millisecond you translate: words per year / days per year / milliseconds per day. I used 31556900 as the words per year value to test, since that's the number of seconds in a year.

Next, you have to apply that total to the current date - the start date, and set that as your starting total.

Finally, create an interval function that adds the number of words to the total.

This should do it:

;(function() {
    // Constants
    var   wpm = (31556900 / 365) / 86400000 // Words per year / days per year / milliseconds per day
    ,   start = new Date('January 1, 2004');

    var now = new Date()
    , total = Math.round((now - start) * wpm);

    var dom = { 
        counter: document.getElementById('counter')  
    };
    dom.counter.textContent = total;

    setInterval(function() {
        total += Math.round((new Date() - now) * wpm)
        dom.counter.textContent = total;
        now = new Date();
    }, 1000)
}())

http://jsfiddle.net/PjmwD/

Answer 2

you can try this, i just translate your PHP code in javascript and calculate your "totalWords" base on the server time.

<script>
var getServerTime = (function () {
    var baseTime = <?php echo time() * 1000; /* convert to milliseconds */ ?>,
        startTime = new Date().getTime();

    return function () {
        return baseTime + (new Date().getTime() - startTime);
    };
}());

var calculateTotalWords = function() {

    var currentServerTime = getServerTime();
    var start = new Date(2004, 0, 1);
    var wordsPerYear = 500000;
    var SecondInYear = 31556926; 
    var wordsPerSecond = wordsPerYear / SecondInYear;
    var delay  = (currentServerTime - start.getTime()) /1000;
    var count =  delay * wordsPerSecond ;   

    return Math.round(count);
}

var interval = setInterval(function(){
    var count = calculateTotalWords();
    document.getElementById("carb").innerHTML = count;

}, 1000);

</script>
</head>

<body>
    <div class="count">
            <span id="carb">
                Loading Word Count...
            </span>
    </div>
</body>
</html>

FIDDLE DEMO

Increment + auto-update variable value in JS

Question

2 answers

solution1
2 2014-03-07 19:45:27

solution2
1 2014-03-07 19:49:23

Increment + auto-update variable value in JS

Question

2 answers

solution1 2 2014-03-07 19:45:27

solution2 1 2014-03-07 19:49:23

solution1
2 2014-03-07 19:45:27

solution2
1 2014-03-07 19:49:23