使用Javascript按鈕刷新按鈕

我對JavaScript很新穎。我試圖實現一個按鈕，控制頁面是否刷新或不。然而，它不起作用（單擊按鈕會觸發警報等一些操作，但不會更改標籤按鈕，並且不會停止刷新頁面）。使用Javascript按鈕刷新按鈕

你能告訴我我哪裏出錯了嗎？這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Message log</title> 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
</head> 

<body onload="JavaScript:timedRefresh(5000);"> 

    <button id="bRefresh" onclick="refreshMode()">Stop refreshing</button> 

    some content... 

</body> 
</html> 

<script type="text/JavaScript"> 
    <!-- 
     var refresh = 1; 

     function timedRefresh(timeoutPeriod) { 
      if(refresh == 1) { 
       setTimeout("location.reload(true);",timeoutPeriod); 
      }  
     } 

     function refreshMode() { 
      if(refresh == 1) { 
       var refresh = 2; 
       document.getElementById("bRefresh").value="Start refreshing"; 
      } else { 
       var refresh = 1; 
       document.getElementById("bRefresh").value="Stop refreshing"; 
      }  
     }; 
    // --> 
</script>

來源

2013-04-22 Smajl

在all..Because這不會工作結束檢查refresh值第一次開始重裝的JavaScript將停止excecuting – 2013-04-22 09:14:31

你的代碼看起來應該像下面，

 var refresh = 1; 
     var timedInterval= null; 
     function timedRefresh(timeoutPeriod) { 
      if(refresh == 1) { 
       timedInterval = setInterval(function() { location.reload(true); },timeoutPeriod); 
      }  
     } 

     function refreshMode() { 
      if(refresh === 1) { 
       refresh = 2; 
       clearInterval(timedInterval); 
       document.getElementById("bRefresh").innerHTML="Start refreshing"; 
      } else { 
       refresh = 1; 
       timedRefresh(5000); 
       document.getElementById("bRefresh").innerHTML="Stop refreshing"; 
      }  
      //document.getElementById("bRefresh").innerHTML="Start refreshing"; 
     };

使用的setInterval代替重複任務的setTimeout

你聲明瞭刷新變量三次，所以你的按鈕值不會改變。

應使用innerHTML而不是value來更改Buttons文本。

如上所述停止使用clearInterval。

來源

2013-04-22 09:26:18 Vinay

這完美的作品 - 謝謝！ – Smajl 2013-04-22 09:32:03

<button id="bRefresh">Stop refreshing</button> 

var button = document.getElementById("bRefresh"); 
var refresh = 1; 
var timeoutPeriod = 5000; 
var id; 

function timedRefresh() { 
    if (refresh == 1) { 
     window.location.reload(true); 
    } 
} 

function refreshMode() { 
    if (refresh == 1) { 
     clearInterval(id); 
     refresh = 2; 
     button.textContent = "Start refreshing"; 
    } else { 
     id = setInterval(timedRefresh, timeoutPeriod); 
     refresh = 1; 
     button.textContent = "Stop refreshing"; 
    } 
}; 

button.addEventListener("click", refreshMode, false); 

id = setInterval(timedRefresh, timeoutPeriod);

上jsfiddle

來源

2013-04-22 09:16:24 Xotic750

使用innerHTML爲supporting IE < 9

var button = document.getElementById("bRefresh"); 
var refresh = 1; 

function refreshMode() { 
    if (refresh == 1) { 
     refresh = 2; 
     button.innerHTML = "Start refreshing"; 
    } else { 
     vrefresh = 1; 
     button.innerHTML = "Stop refreshing"; 
    } 
}; 

button.addEventListener("click", refreshMode, false);

來源

2013-04-22 09:20:48

在身體的負載上，prepareRefresh()函數檢查值refresh（設置爲1）並開始刷新超時頁面。您應該啓動刷新，並在刷新之前，您必須檢查refresh值。因爲在第一種情況下，location.reload不關心refresh的修改。在超時

<script type="text/JavaScript"> 
    <!-- 
     var refresh = 1; 

     function timedRefresh(timeoutPeriod) { 
      if(refresh == 1) { 
       setTimeout("refreshPage();",timeoutPeriod); 
      }  
     } 

     function refreshPage() 
     { 
      if(refresh == 1) { 
       setTimeout("location.reload(true);", 0); 
      } 
     } 

     function refreshMode() { 
      if(refresh == 1) { 
       refresh = 2; 
       document.getElementById("bRefresh").innerHTML="Start refreshing"; 
      } else { 
       refresh = 1; 
       document.getElementById("bRefresh").innerHTML="Stop refreshing"; 
      }  
     }; 
    // --> 
</script>

來源

2013-04-22 09:28:56 Marcassin

使用Javascript按鈕刷新按鈕

回答

相關問題