Question

我有一个奇怪的问题，我不确定如何说出标题。

我正在尝试做什么：

我想跟踪一个正在运行的总计，我希望这个运行总计每秒更新直播到我的页面。我不是想跟踪访客，它会追踪一些奇怪的东西，比如“你身体里的血细胞数量！”这是一个做我想做的事情的网站，但他们在jquery中做，我正在尝试用JS来保持JS文件的最小化。 http://www.usagain.com/（左侧）

我是怎么做的：

我有一个带有AJAX的JS文件，它链接到一个PHP文件，而PHP文件打开一个文本文件 - ＆gt;抓取一个数字 - ＆gt;将其递增1 - >将所述号码发回JS - ＆gt;将数字更新为HTML - ＆gt;并且PHP更新文本文件 - ＆gt;关闭txt文件。

我的问题：

计数器工作，它递增，但问题是如果我有2个浏览器运行相同的页面，数字将增加2.如果我有3个浏览器;数字将增加3，依此类推。我认为它与写入文件有关，但我不确定如何修复它。

我的代码

HTML / CSS /使用Javascript / AJAX

<html>
<head>
<title>Counter</title>
<script language="javascript" src="../jquery1.6.js"></script>
<script type="text/javascript">

    function addCommas(nStr) //http://www.mredkj.com/javascript/nfbasic.html -- Source
    {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }

    function getNum()
    {
        $.post('test.php', function(data){
            $('#counter').html(addCommas(data));
        })
    }   
    setTimeOut(getNum, 1000);
</script>
<style type="text/css">
    #counterContainer{color: #52504D;font-family:Verdana, Geneva, sans-serif;font-weight:bold;font-size:15px;position:relative;top:22px;}
    #counter{color: #1E7EC8; font-size: 25px;letter-spacing:1px;}
</style> 
</head>
<body onload="getNum()">
    <div id="counterContainer">
        <div id="counter"><!--Counter Goes Here, Do Not Disturb--></div>
    </div>
</body>
</html>

PHP文件

<?php
    $fp = fopen("staticNum.txt", "r+");
    flock($fp, LOCK_EX);
    $num = fgets($fp, 11);
    $num = intval($num)+1;

    echo $num;

    fseek($fp, 0, SEEK_SET);
    fputs($fp, "$num");
    flock($fp, LOCK_UN);
    fclose($fp);
?>

我的文本文件中只有这个数字：

10000100260

任何建议都会很棒。我的第一个想法是一个数据库，但后来我发现我有同样的问题。我确实希望远离会话变量和Cookie，因为我不认为它们是必要的。我可能错了。

如果你能找到一种方法来解决我没有数据库的问题，那么你可以获得奖励积分！（虽然我不是管理员，但并非如此:(

Answer 1

我不完全确定你的计数器是如何运作的 - 它从哪个数据开始计算，但我认为这应该可以帮到你：

var init_count = 10000100260; //starting heartbeats
var count_start = 1325803921; //timestamp of when initial count was taken

function update_count()
{
    var utstamp = new Date();
    utstamp = Math.round(utstamp.getTime()/1000); //get current unix timestamp
    var newcount = (utstamp - count_start) + init_count; //add seconds passed since initial count, to the initial count
    $("#beat_count").html(newcount); //set the contents of your element to the new number
}

var ticker = setInterval(update_count,1000); //call the above function every 1000 milliseconds (1 second)

您可以使用以下表单获取初始时间戳：http://www.functions-online.com/mktime.html

这可能会引起更多问题而不是答案，但无论如何都要让我知道！

Answer 2

尝试使用时间戳：

，而不是计数

value = ( timestamp % ((max_limit - min_limit) / 1.5 ) ) * 1.5 + min_limit

Answer 3

计数器工作，它递增，但问题是如果我有2个浏览器运行相同的页面，数字将增加2.如果我有3个浏览器;数字将增加3，依此类推。我认为它与写入文件有关，但我不确定如何修复它。

我假设你有每个用户运行多个浏览器。计数器有效，但您认为用户实际上是一个浏览器。由于每个浏览器都会触发计数的增加，因此您描述的不是问题，而是您的脚本如何工作的事实。

通过时间戳实时统计/增量

3 个答案: