倒数计时器,页面更改时无刷新

时间:2013-08-01 11:21:20

标签: php javascript

<HEAD>
<SCRIPT LANGUAGE="JavaScript">

var time_left = 50;
var cinterval;
var timestatus=1;

function time_dec(){
    time_left--;
    document.getElementById('countdown').innerHTML = time_left;
    if(time_left == 0){
        clearInterval(cinterval);
    }
}

function resumetime()
{
    //time_left = 50;
    clearInterval(cinterval);
    cinterval = setInterval('time_dec()', 1000);
}

function defaultstart()
{
    time_left = 50;
    clearInterval(cinterval);
    cinterval = setInterval('time_dec()', 1000);
}

function stopstarttime()
{
    if(timestatus==1)
{
    clearInterval(cinterval);
    document.getElementById('stopbutton').value="Start";
    timestatus=0;
}
    else
{
    clearInterval(cinterval);
    cinterval = setInterval('time_dec()', 1000);
    document.getElementById('stopbutton').value="Stop";
    timestatus=1;
}
}

defaultstart();

</SCRIPT>
</HEAD>

<body>
Redirecting In <span id="countdown">50</span>.
<INPUT TYPE="button" value="stop" id="stopbutton" onclick="stopstarttime()">
</body>
</HTML>


    我是初学者。我有10个问卷页面。是否有可能此计时器不会刷新页面更改/刷新。它应该对不同的用户有不同的作用。如果可能请帮助我。

1 个答案:

答案 0 :(得分:0)

您可以存储计时器应在cookie或localStorage中结束的时间戳。然后使用此cookie显示正确的计数器。此解决方案不是100%安全(如果用户知道如何通过开发人员控制台更改cookie / localStorage,则用户可以更改此cookie的值以使计数器持续更长时间),因此请勿在此情况下使用它

var timeLeft = 50;
if( window.localStorage ) {
  if( !localStorage.getItem( 'endTimer' ) ) {
    localStorage.setItem( 'endTimer', new Date().getTime() + (timeLeft * 1000) );
  }
}

剩下的时间(以毫秒为单位)为localStorage.getItem( 'endTimer' ) - new Date().getTime()