JS中的增量+自动更新变量值答案

【问题标题】：Increment + auto-update variable value in JSJS中的增量+自动更新变量值
【发布时间】：2014-03-07 18:57:04
【问题描述】：

我是JS和PHP的初学者，所以请原谅我的无知并多多包涵:)

我正在尝试在我的网站上实施实时计数器。这个计数器应该显示到现在的翻译字数，我希望这个数字更新“实时”以反映翻译字数（基于我的年度平均值）。

为简化起见，我设置了一个变量 $wordsPerYear，其中平均每年翻译的字数为 1,000。我还将开始日期设置为 10 年前（2004 年），因此它返回大约 10,000。

到目前为止，这是我的代码：

<!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>

我只需要使用 setInterval('updateCounter()', 1000) 使这个数字更新“实时”并使用翻译的单词的真实值而不是“假”实时增量。

所以是的，我真的只需要更新函数以将字数计数值更新为当前时间与我的开始日期的比率。

谁能帮我实现这个目标？我确信这是一件非常简单的事情，但我绞尽脑汁却无济于事。让我知道是否需要澄清来解释我想要做什么！

提前致谢

【问题讨论】：

不明白，如果你只根据时间计算单词翻译数，你不需要PHP，或者只是在你加载页面时才有服务器时间。如果我错了，您将值 totalWords 存储在哪里？
不确定你在问什么...我认为我不需要将totalWords 存储在任何地方，因为它是在页面加载时计算的 - 或者我需要吗？

标签： javascript php html function counter

【解决方案1】：

没有必要同时使用 PHP 和 Javascript，因为您实际上并没有从服务器获取任何值 - 这一切都是在真空中计算的。

从根本上说，这是一道数学题。 Javascript 以毫秒为单位计算日期的差异，因此您首先需要知道每毫秒翻译的字数：每年的字数/每年的天数/每天的毫秒数。我使用 31556900 作为每年的单词值来测试，因为这是一年中的秒数。

接下来，您必须将该总数应用于当前日期 - 开始日期，并将其设置为您的起始总数。

最后，创建一个区间函数，将单词数加到总数中。

应该这样做：

;(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/

【讨论】：

var wpm = (words_per_year / 365) / 86400000
附注 - 如果您每年的平均字数在 10,000 左右，您可能希望放弃时间间隔，只计算页面加载时的字数。在 10,000 个单词的情况下，您平均每小时只有 1 个单词。
实际上接近 500,000，这只是为了示例 - 因此希望看到它实时更新:)
我为您的每个解决方案创建了一个虚拟文件，输入了相同的开始日期和每年相同的字数，并且它们在给定时间显示不同的数字......奇怪
感谢您的意见和帮助！

【解决方案2】：

你可以试试这个，我只是用 javascript 翻译你的 PHP 代码，然后根据服务器时间计算你的“totalWords”。

<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

【讨论】：

我很困惑，您提供的代码不会实时更新——仅在页面加载时。还是我错过了什么？
@Kadjar 解释第一次计算延迟几天无法工作。我修改计算。
但如果我每年 500 000 个单词没有错的话，它仍然只有每分钟 0.95 个单词。它不会更新这么多。
你是对的。不过我要求确认，每年的字数超过 200 万，所以我完全不在了（我只是做了一个估计）