2014-01-23 84 views
0

我一直在挖掘檔案,並且沒有找到我正在尋找的內容,因此,由於我被阻止並在最後期限之後,希望有更多經驗的人可以在這裏幫幫我。將啓動/停止功能添加到自動刷新代碼

總體團隊對我給予他們的東西感到滿意,但他們要求開始/停止按鈕,以便在他們需要獲取有關在該頁面中投放的廣告的詳細信息時暫停自動刷新。我一直在竊聽它,知道我很近,但有人可以幫我嗎?

這裏是我到目前爲止的代碼:

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

我只是需要幫助聯的啓動/停止按鈕,我刷新代碼和一些輸出,讓當它切換的用戶都知道,所以任何幫助任何人都可以在這裏提供會非常感謝!

回答

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>