Javascript 自动页面刷新代码

这是head部分中的代码，当我在下面的代码中输入6000时，它将在1分钟内自动刷新整个页面

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

有没有办法例如，当还有 10 秒刷新页面时，将显示一个按钮并说"单击此处重置计时器"，它会再次将该计时器重置为 1 分钟？

  <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>

假设您有以下按钮的 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 秒，之后它最终重新加载。

下面

怎么样？如果单击"确定"重置计时器，它将每 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 秒）我已经包含了一分钟

您可以使用

2 个 setTimeout 调用，一个用于显示"重置"按钮，另一个用于刷新计时器重置。诀窍是将第二个 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>

我会做的是创建一个超时函数，并调用该函数

<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 秒内自动拒绝。

尝试使用 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' />

相关内容

最新更新

热门标签：