Question

我正在尝试创建一个能够显示实时翻译的单词数量的实时计数器。我会在开始年份，当前时间，每年翻译的单词数量中提供它，并且此计数器将通过平均每年翻译的单词数来显示实时计数。这样我就不必创建一个假的时间间隔来更新这个计数器。

我在网上找到了这个代码段，我正在考虑编辑它以满足我的需求：

<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上太糟糕了...谢谢

Answer 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

Answer 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)的“假”实时增量。

你能帮我把它放在一起吗？：）

带变量的实时增量计数器

2 个答案: