Question

这是head部分的代码，它会在1分钟内自动刷新整个页面，因为我在下面的代码中放了6000个

<script type="text/javascript">
setTimeout('window.location.href=window.location.href;', 6000);
</script>

有没有办法，例如，当剩下10秒钟刷新页面时，会显示一个按钮并说出＆＃34;点击此处重置计时器＆＃34;它会将该计时器重置为1分钟？

Answer 1

假设你有按钮的以下html：

<button id="cancel-reload-button" style="display: none" onclick="cancelReload()">Cancel Reload</button>

这就像脚本一样（注意：这给出了想法，但未经过全面测试）：

// Variable for holding the reference to the current timeout
var myTimeout;

// Starts the reload, called when the page is loaded.
function startReload() {
   myTimeout = setTimeout(function() {

       document.getElementByID("cancel-reload-button").style.display = "inline";

       myTimeout = setTimeout(function() {
           window.location.reload();
       } 10000)

   }, 50000);
}

// Cancel the reload and start it over. Called when the button is
// clicked.
function cancelReload() {
    clearTimeout(myTimeout)
    startReload()
}

// On page load call this function top begin.
startReload();

我创建了两个函数，一个用于启动重新加载，另一个用于取消它。

然后我将超时分配给变量myTimeout，可以用来稍后取消超时。

然后我调用myTimeout两次 - 一次50秒，此时它显示按钮，一次持续10秒，之后最终重新加载。

Answer 2

  <script language="javascript">
        var timeout,interval
         var threshold = 15000;
        var secondsleft=threshold;
        startschedule();

        window.onload = function()
        {
            startschedule();
        }

         function startChecking()
         {
            secondsleft-=1000;
            if(secondsleft <= 10000)
            {
                document.getElementById("clickme").style.display="";
                document.getElementById("timercounter").innerHTML = Math.abs((secondsleft/1000))+" secs";  
            }
        }
        function startschedule()
        {
              clearInterval(timeout);
              clearInterval(interval);
              timeout = setTimeout('window.location.href=window.location.href;', threshold);
              secondsleft=threshold;
               interval = setInterval(function()
               {
                   startChecking();
               },1000)              
            }

            function resetTimer()
            {
            startschedule();
            document.getElementById("clickme").style.display="none";
            document.getElementById("timercounter").innerHTML="";
             }
    </script>
            Please wait...<span id="timercounter"></span>
            <button id="clickme" style="display:none;" onclick="javascript:resetTimer();">Click here to reset timer</button>

Answer 3

下面怎么样？如果单击“确定”重置计时器，它将每隔50秒继续给出确认框。如果单击“取消”，它将在10秒内刷新页面。

setInterval(function(){ var r = confirm("Reset Timer");
if (r == true) {
 setTimeout('window.location.href=window.location.href;', 60000);
} else {
   setTimeout('window.location.href=window.location.href;', 10000);
}
}, 50000);

注意：在您的问题中，您指定了1分钟，但您的代码工作了6秒（6000 - > 6秒而不是60秒）我已经包含了一分钟

Answer 4

我这样做的方法是创建一个超时函数，然后调用该函数

<script type="text/javascript">
    var refreshFunc = function(){
      setTimeout(function(){
                     var r = confirm("Do you want to reset the timer?");
                     if(r === false){
                       window.location.href=window.location.href;
                     }else{
                       refreshFunc();
                     }
                  }, 6000);
    };
    refreshFunc();
</script>

在这种情况下使用确认的一个大问题是您无法将其编程为拒绝。您必须实现自己的模态/对话框，以便在10秒内自动拒绝。

Answer 5

尝试使用setInterval()：

var time;

$(function() {
  time = $('#time');
  $('#reset').on('click', reset);
  start();
});

var timer, left;

var start = function() {
  left = +(time.text()); //parsing 
  timer = setInterval(function() {
    if (0 <= left) {
      time.text(left--);
    } else {
      clearInterval(timer);
      location.replace(location);
    }
  }, 1000);
};

var reset = function() {
  if (timer) {
    clearInterval(timer);
  }
  time.text('59');
  start();
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1><span id='time'>59</span> second(s) left</h1>
<input id='reset' value='Reset' type='button' />

Answer 6

您可以使用2个setTimeout调用，一个用于进行＆＃34;重置＆＃34;按钮显示，另一个按钮用于刷新定时器重置。诀窍是将第二个setTimeout存储在全局变量上，如果按下按钮，则使用clearTimeout重置它。这里有一些JavaScript代码来说明：

<script type="text/javascript">

var autoRefreshTime = 30 * 1000; // 60000ms = 60secs = 1 min
var warningTime = autoRefreshTime - (10 * 1000); // 10 secs before autoRefreshTime

waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
warningTimeout = setTimeout('ShowResetButton();', warningTime);

function ShowResetButton() {
    // Code to make the "Reset" button show up
}

// Make this function your button's onClick handler
function ResetAutoRefreshTimer() {
    clearTimeout(waitTimeout);
    waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
}
</script>

Javascript自动页面刷新代码

6 个答案: