将启动/停止功能添加到自动刷新代码

时间：2014-01-23 17:54:38

标签： javascript

我一直在通过档案挖掘，并没有找到我正在寻找的东西，所以因为我被封锁并在截止日期前，希望有更多经验的人可以帮助我。

整体团队对我给他们的内容感到满意，但是当他们需要获取有关页面中投放广告的详细信息时，他们要求启动/停止按钮暂停自动刷新。我一直在攻击它并且知道我很亲密，但有人可以在这帮助我吗？

到目前为止，这是我的代码：

<!doctype html>
<html>
<head>
<title>Demand Tag Testing- Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
  body {
    padding-top: 50px;
    padding-bottom: 20px;
  }
</style>
<script type="text/javascript" language="javascript">
  /** Function to refresh the page at specified interval. **/
  function autoRefresh(refreshPeriod) {
      setTimeout("window.location.reload();",refreshPeriod);
  }
</script>
<script type="text/javascript" language="javascript">
/** Function to stop refreshing the page. **/
function stopRefresh() 
{ 
clearTimeout(refreshPeriod); 
window.location.hash = 'stop' 
}
/** Function to start refreshing the page if stopped. **/
function autoRefresh(refreshPeriod) {
setTimeout("window.location.reload();",refreshPeriod);
window.location.hash = 'start' 
}
</script>
</head>
<body onload="autoRefresh(60000);">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Tag Tester :: Demand Partners</a>
    </div>
    <!--/.navbar-collapse -->
  </div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <h1>Demand Tag Testing</h1>
    <p>This is a template for testing the tags we get from Demand Partners. It includes scripts that auto-refresh the page every 60 seconds and keeps track of the number of page views for you.  You can also manually refresh from cache or the server using the buttons below.</p>
    <ul>
      <li>There are three ad slots below, load 1 tag per slot.</li>
      <li>Allow test to run until pageview counter reaches 500</li>
      <li>The pageview counter is PER SESSION, so if you close your browser, you will lose the count</li>
    </ul>
  </div>
</div>
<div class="container">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-lg-6">
      <h2>Ad Slot #1</h2>
      <p>Paste Ad Tags Here</p>
    </div>
    <div class="col-lg-3">
      <h2>Ad Slot #2</h2>
      <p>Paste Tags Here</p>
    </div>
    <div class="col-lg-3">
      <h2>Ad Slot #3</h2>
      <p>Paste Tags Here</p>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <h2>Page Reload Count:</h2>
      <script type="text/javascript" language="javascript">
        if (sessionStorage.clickcount) {
          sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
        } else {
          sessionStorage.clickcount = 1;
        }
        document.write("The page has been reloaded " + sessionStorage.clickcount + " time(s) in this session.");
      </script>
      <div class="btn-group">
          <a class="btn btn-success" onclick="startRefresh()" id="start">Start Refresh</a>
          <a class="btn btn-danger" onclick="stopRefresh()" id="stop">Stop Refresh</a>
          <p id="console"></p>
      </div>
    </div>
    <div class="col-lg-4">
      <h2>Reload Cached Page:</h2>
      <a class="btn btn-success" href="javascript:window.location.reload();">Click To Reload From Cache</a>
    </div>
    <div class="col-lg-4">
      <h2>Reload From Server</h2>
      <button class="btn btn-success" onclick="window.location.reload(true);">Click To Reload From Server</button>
    </div>
  </div>
  <hr>
  <footer>
    <p>&copy; Company Name, Inc 2014</p>
  </footer>
</div>
<!-- /container -->
</body>

</html>

我只需要帮助将这些启动/停止按钮链接到我的刷新代码和一些输出，让用户知道它什么时候切换，所以任何人都可以提供的帮助将非常感谢！

1 个答案:

答案 0 :(得分：0)

你有几个问题，首先你没有启动功能但是两个autoRefresh这是一个错字我想。其次，你需要声明全局变量并在那里存储超时。这是更新后的代码：

<!doctype html>
<html>
<head>
<title>Demand Tag Testing- Home</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
  body {
    padding-top: 50px;
    padding-bottom: 20px;
  }
</style>
<script type="text/javascript" language="javascript">
    var myRefreshTimeout;

    /** Function to refresh the page at specified interval. **/
    function startRefresh(refreshPeriod) {
        myRefreshTimeout = setTimeout("window.location.reload();",refreshPeriod);
    }

    /** Function to stop refreshing the page. **/
    function stopRefresh() {
        clearTimeout(myRefreshTimeout);
        window.location.hash = 'stop' 
    }
</script>

</head>
<body onload="startRefresh(60000);">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Tag Tester :: Demand Partners</a>
    </div>
    <!--/.navbar-collapse -->
  </div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
  <div class="container">
    <h1>Demand Tag Testing</h1>
    <p>This is a template for testing the tags we get from Demand Partners. It includes scripts that auto-refresh the page every 60 seconds and keeps track of the number of page views for you.  You can also manually refresh from cache or the server using the buttons below.</p>
    <ul>
      <li>There are three ad slots below, load 1 tag per slot.</li>
      <li>Allow test to run until pageview counter reaches 500</li>
      <li>The pageview counter is PER SESSION, so if you close your browser, you will lose the count</li>
    </ul>
  </div>
</div>
<div class="container">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-lg-6">
      <h2>Ad Slot #1</h2>
      <p>Paste Ad Tags Here</p>
    </div>
    <div class="col-lg-3">
      <h2>Ad Slot #2</h2>
      <p>Paste Tags Here</p>
    </div>
    <div class="col-lg-3">
      <h2>Ad Slot #3</h2>
      <p>Paste Tags Here</p>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <h2>Page Reload Count:</h2>
      <script type="text/javascript" language="javascript">
        if (sessionStorage.clickcount) {
          sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
        } else {
          sessionStorage.clickcount = 1;
        }
        document.write("The page has been reloaded " + sessionStorage.clickcount + " time(s) in this session.");
      </script>
      <div class="btn-group">
          <a class="btn btn-success" onclick="startRefresh()" id="start">Start Refresh</a>
          <a class="btn btn-danger" onclick="stopRefresh()" id="stop">Stop Refresh</a>
          <p id="console"></p>
      </div>
    </div>
    <div class="col-lg-4">
      <h2>Reload Cached Page:</h2>
      <a class="btn btn-success" href="javascript:window.location.reload();">Click To Reload From Cache</a>
    </div>
    <div class="col-lg-4">
      <h2>Reload From Server</h2>
      <button class="btn btn-success" onclick="window.location.reload(true);">Click To Reload From Server</button>
    </div>
  </div>
  <hr>
  <footer>
    <p>&copy; Company Name, Inc 2014</p>
  </footer>
</div>
<!-- /container -->
</body>

</html>
相关问题
最新问题