Question

我想显示用户的浏览时间，但是当我刷新它时，它将再次从0：0：0开始。它怎么处理？

<?php
 $total_mints=($live_match['match_name']) * (60);

?>
<script language="javascript">
display_c(<?=$total_mints?>,'ct');
</script>

<script type="text/javascript">
function display_c(start,div){

window.start = parseFloat(start);
var end = 0 // change this to stop the counter at a higher value
var refresh=1000; // Refresh rate in milli seconds
if(window.start >= end ){

mytime=setTimeout("display_ct('"+div+"')",refresh)
}
else {alert("Time Over ");}
</script>

Answer 1

一旦时间结束，你可以将cookie设置为'Time Expired'...当页面加载时，如果cookie是'Time Expired'，那么你可以显示'Time Over'警告。您还可以使用cookie来跟踪累计浏览时间。

编辑 - 添加了一些细节...但我认为你还需要考虑更多。

基本上，您希望在用户使用页面时使用JS编写cookie，并且您希望在加载页面时使用PHP来读取cookie。您可以使用cookie来仅跟踪时间是否到来，总累计时间或两者。我想你想每分钟更新一次cookie？

它会像这样看起来像 SOMETHING - 这段代码只展示了如何跟踪时间是否已经过期而不是累积时间。

<?php
$total_mints=($live_match['match_name']) * (60);
// check for cookie and only proceed if it is not expired
// can also use cookie to keep track of total accumulated number
// of minutes between session
if ($_COOKIE["yourMints"] != "expired")
{
    ?>
    <script language="text/javascript">
        display_c(<?php echo $total_mints; ?>,'ct');
    </script>
    <script type="text/javascript">
    function display_c(start,div)
    {
        window.start = parseFloat(start);
        var end = 0 // change this to stop the counter at a higher value
        var refresh=1000; // Refresh rate in milli seconds
        if(window.start >= end )
        {
            mytime=setTimeout("display_ct('"+div+"')",refresh)
        } else 
        {
            alert("Time Over ");
            // set cookie to expired
            document.cookie = "yourMints=expired";  
        }
    }
    </script>
    <?php
} else // What follows is what happens if cookies IS expired
{
    ?>
    <script type="text/javascript">
        alert("Time Over ");               
    </script>
    <?php
}
?>

这是一个很好的JS cookies教程： http://www.quirksmode.org/js/cookies.html

这里使用$ _COOKIE用PHP读取cookie http://php.net/manual/en/reserved.variables.cookies.php

编辑：在看到PlagueEditor的例子之后在JQuery示例中添加。

好剧本PlagueEditor。我以为我会尝试使用JQuery做同样的事情。

JQuery有一个simple little cookie plugin ...只有40行代码。这是一个带有cookie存储计时器的页面，超时为10秒，可能会重置：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Time Spent on Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="PATH-TO-YOUR-JQ-DIRECTORY/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="PATH-TO-YOUR-JQ-DIRECTORY/cookie.js"></script>
        <script type="text/javascript">
        <!--
            $.myTimer = 
            {
                timeLimit: 10,
                displayTime: function ()
                {
                    if ($.myTimer.time < $.myTimer.timeLimit)
                    {
                        $("#timeHere").html($.myTimer.time);                 
                        $.cookie('yourMints', $.myTimer.time, { expires: 7});     
                        ++$.myTimer.time;
                        $.myTimer.toggle = setTimeout("$.myTimer.displayTime()",1000);
                    } else
                    {
                        $("#page").html('<h1>Time expired</h1>');
                    }
                }
            }
            // When the page is ready ==================================================
            $(document).ready(function()
            {
                // Read time spent on page cookie. Set it, if it doesn't exist.
                if (!$.cookie('yourMints'))
                {
                    $.cookie('yourMints', '0', { expires: 7});                 
                }
                $.myTimer.time = $.cookie('yourMints');
                // Start timeer
                $.myTimer.displayTime();
                // Reset the timer
                $("#reset").click( function() 
                {        
                    $.cookie('yourMints', '0');
                    window.location.reload();
                });
            });
        // -->
        </script>
    </head>
    <body>
        <div id="page">
            <h2>Your total time here: <span id="timeHere"></span></h2>
            You can only look at this page for 10 seconds.
        </div>
        <input id="reset" type="button" value="Reset Timer" /> 
    </body>
</html>

Answer 2

以下是跟踪浏览时间的解决方案，即使是刷新也是如此。它获取页面加载的日期，每秒从给定日期中减去该日期。然后，日期显示在范围中。页面应该单独工作。我希望这是你正在寻找的，或者至少是有帮助的。两个功能是W3Schools的例子*。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script type="text/javascript">
            /**
             * getCookie and setCookie were taken from http://www.w3schools.com/JS/js_cookies.asp.
             */
            function getCookie(c_name)
            {
                if (document.cookie.length>0)
                {
                    c_start=document.cookie.indexOf(c_name + "=");
                    if (c_start!=-1)
                    {
                        c_start=c_start + c_name.length+1;
                        c_end=document.cookie.indexOf(";",c_start);
                        if (c_end==-1) c_end=document.cookie.length;
                        return unescape(document.cookie.substring(c_start,c_end));
                    }
                }
                return "";
            }

            function setCookie(c_name,value,expiredays)
            {
                var exdate=new Date();
                exdate.setDate(exdate.getDate()+expiredays);
                document.cookie=c_name+ "=" +escape(value)+
                    ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
            }

            var totalTime=0;

            var storedTime=getCookie("storedTime");
            if(storedTime.length == 0){
                //If it doesn't exist..
                storedTime=0;
            }else{
                storedTime=parseInt(storedTime);
                totalTime=storedTime;
            }

            function updateTime(){
                totalTime+=1000;
                document.getElementById("duration").innerHTML= Math.ceil(totalTime / 1000);
            }

            onbeforeunload = function(){
                setCookie("storedTime",totalTime,3);
            }            
            setInterval(updateTime, 1000);
        </script>
        Your total time here: <span id="duration"><script type="text/javascript">document.write( Math.ceil(totalTime / 1000));</script></span> seconds...
    </body>
</html>

浏览时间问题

2 个答案: