带变量的实时增量计数器答案

【问题标题】：Live incremental counter with variables带变量的实时增量计数器
【发布时间】：2014-03-07 02:05:30
【问题描述】：

我正在尝试创建一个实时计数器来显示实时翻译的字数。我会输入开始年份、当前时间、每年翻译的单词数，这个计数器会通过平均每年翻译的单词数来显示实时计数。这样我就不必创建一个虚假的时间间隔来更新这个计数器。

我在网上找到了这个 sn-p，我正在考虑编辑它以满足我的需要：

<html>
    <head>
        <style type="text/css">
            div.cont {
                position: relative;
                background-image: url(counter.gif);
                width:160px;
                height:110px;
                vertical-align:text-bottom;
            }
            div.cont div.ans {
                position: absolute;
                bottom: 0px;
                margin-bottom:15px;
                margin-left:7px;
                color:black;
                font-family: Verdana, Tahoma, Sans-Serif;
                font-size: 15pt;
                line-height: normal;
            }
        </style>
        <?php
        $now=time();
        $start=mktime(0, 0, 0, 1, 24, 2007);
        $carbonsaving=((($now - $start) * 0.0058774) + 130000);
        $format=round($carbonsaving, 2);
        // in this example
        // $now=a unix timestamp of this very second
        // $start is the date that you want the counter to start from sent over
        //as a unix timestamp
        // $carbonsaving is the calculation that you want to perform to get
        //your base figure
        // i.e. total saving=( (date now - start date)* growth rate) + base rate
        // this gives us the starting saving all that needs to be done is increment it with javascript
        ?>
        <script type="text/javascript">
            // we need to import our server side variable into javascript to let it increment live
            var car = <? php print($format); ?> ;
            var rou

                function incs() {
                    car = car + 0.01;
                    rou = Math.round(car * 100) / 100
                    document.getElementById("carb").innerHTML = rou;
                }
                // what function incs does is take car and adds 0.01 to it
                //rou rounds the figure to 2 dp
                //the document.getElementById("carb") can refer to a <p> tag //<span> or whatever and just says with .innerHTML=rou; that the //value between the  results of rou
        </script>
    </head>
    <!-- body onload setInterval tells the page to load our javascript function and repeat it by every x microseconds, so this repeats every 2 seconds //-->

    <body onload="setInterval('incs()', 2000)">
        <div class="cont">
            <div class="ans"> <span id="carb">Calculating...</span>

            </div>
        </div>
    </body>
</html>

谁能帮我做这件事，因为我的 PHP 太差了...谢谢

【问题讨论】：

小心使用缩进？

标签： javascript php html counter

【解决方案1】：

var start = <?php echo mktime(0, 0, 0, 1, 24, 2007); ?>; // desired start time.
    // refer to [1] for mktime() 
function updateCounter(){
    $(function(){
        $( "#count" ).load( "count.php?stime="+start );
    });
}

它将从php中获取当前数量的单词并写入id。

您现在可以设置更新时间间隔：

<body onload="setInterval('updateCounter()', 2000)">

PHP：

<?php
    // I assume that you have the function that finds translated words per year.
    // It's not clear that what you want from server side and client site.
    // Update me, please. Then I will update for you.
    echo $counter->get_current($_GET['stime']);
?>

[1]http://tr1.php.net/manual/en/function.mktime.php

【讨论】：

谢谢梅莉！我实际上没有字数统计功能；我设想给一个变量每年的单词数（过去的平均值，比如 10 年或其他）。我有这个号码，如果需要，我希望以后能够更新它。
我不明白你想更新什么。你想为那一年更新它吗？例如。在年底。或者您想更新浏览器屏幕以获取从其他来源获得的新值？
对不起，我给你举一个精确的例子来说明：假设我想从 2004 年 1 月 1 日开始计数（简化为 10 年前）。假设我每年翻译的字数是 10,000，并且假设现在的时间是 2014 年 1 月 1 日午夜，那么此时显示的字数将是 100,000。我取整数来简化，但它们可以是任何数字，并且在我的网站上任何时间点显示的计数都是从开始日期到今天之间翻译的平均字数。
另一个例子，你能解释一下在这种情况下会发生什么：开始日是午夜的Jan 1, 2004，结束日是午夜的May 30, 2014（四舍五入，一年中的第150天）。每年翻译的字数为10,000。我不明白的是，如果你有每年翻译的字数，你为什么要寻找一个函数来找到它？你已经有了。你到底想找到什么？我看到你只是将10.000 与10 相乘，即2014-2004。
你的意思是要在php中计算？可能是这样的事情？ $count = $totalDays/365 * $wordsPerYear 在这里 $totalDays 是给定开始日期和现在之间间隔过去的天数。

【解决方案2】：

好的，所以我现在有了一个可行的解决方案，其中的数字是有意义的（感谢您帮助我弄清楚如何做到这一点，我想我的数学技能甚至低于我的想法！）：

<!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) 进行“假”实时增量。

你能帮我把这些放在一起吗？ :)

【讨论】：