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


Live Statistics / incrementer via Timestamp

我遇到了一个奇怪的问题,我不知道如何拼写标题。

我想做的事:

我想跟踪一个正在运行的总数,我希望这个正在运行的总量每秒都能实时更新到我的页面上。我不想跟踪访客,它会跟踪一些奇怪的事情,比如"你身体里现在的血细胞数量!"这是一个做我想做的事情的网站,但他们在jquery中做,我试图在JS中做,以将JS文件保持在最低限度。http://www.usagain.com/(左侧)

我是如何做到的:

我有一个带有AJAX的JS文件,它链接到一个PHP文件,该PHP文件打开一个文本文件->获取一个数字->将其递增1->将所述数字发送回JS->将数字更新为HTML->,PHP更新文本文件->关闭txt文件。

我的问题:

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

我的代码

HTML/CSS/Javascript/AAJAX

<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,当然,因为我认为它们没有必要。不过我可能错了。

如果你能在没有数据库的情况下找到解决我问题的方法,就可以获得加分!(虽然我不是管理员,但不是真的:(

不要计数,而是尝试使用时间戳:

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

我不完全确定你的计数器将如何工作——它从哪里开始计数等等,但我认为这应该会对你有所帮助:

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

这可能会提出比答案更多的问题,但无论如何都要让我知道!

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

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