使用Javascript的HTML頁面翻新

我有一個小問題：在我的頁面中，我使用從圖標+ CSS類創建的按鈕。當我的用戶按下按鈕時，我想在半秒鐘內按下按鈕，以便用戶可以確定他點擊了該圖標：爲此，我更改了按鈕對象的內容，捕獲了「休息「的代碼，然後保持相同的圖標，但在選定的時間內用」按鈕「替換」休息按鈕「類，最後恢復」休息「代碼。使用Javascript的HTML頁面翻新

不幸的是，除非我在代碼中插入一個「alert」來檢查它是否正確，否則效果不會出現：我如何強制Javascript刷新HTML頁面，以便我可以看到我的按鈕在我選擇的時間內按下，然後再次未按下？

下面是代碼：（來自法國，你可以猜到，如果你想要真實地檢查它，請在html頁面的相同目錄下創建一個圖標'loupe.ico'）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Untitled Document</title> 

    <style type='text/css'> 
     .boutonRepos { /* button is up */ 
      border:2px solid; 
      border-top-color:#EEE; 
      border-left-color:#EEE; 
      border-right-color:#666; 
      border-bottom-color:#666; 
     } 
     .boutonActif { /* button is pressed */ 
      border:2px solid; 
      border-top-color:#666; 
      border-left-color:#666; 
      border-right-color:#EEE; 
      border-bottom-color:#EEE; 
     } 
    </style>   
    </head> 
    <body> 
      <span id='bouton'><img src='loupe.ico' class='boutonRepos' onclick='vazy();'/></span> 

    <script type='text/javascript'> 
     function vazy() 
     { //Actionnement du bouton 
      var obj = document.getElementById('bouton'); 
      var repos = obj.innerHTML; 
      var actif = "<img src='loupe.ico' class='boutonActif'/>" 
      obj.innerHTML = actif; 
      // alert(" actif = " + obj.innerHTML); 
      attendre(500); 
      obj.innerHTML = repos; 
      alert("action terminée. verif = " + verif);   
     } 
     function attendre(NbMilliSecondes) 
     { //waiting loop (milliseconds) 
      var d = new Date(); 
      var t0, t1, ecart; 
      t0 = d.getTime(); 
      do 
      { 
       d = new Date(); 
       t1 = d.getTime(); 
       ecart = t1 - t0; 
      } 
      while (ecart < NbMilliSecondes); 
     }  
    </script>  
    </body> 
</html>

來源

2011-12-05 BBBreiz

使用JavaScript計時器：

http://bonsaiden.github.com/JavaScript-Garden/#other.timeouts

setTimeout的是什麼，你可能想使用。只需設置按鈕圖標，然後在定時器中有一個功能，可在時間用完時將其切換回去。

來源

2011-12-05 14:27:36 kand

感謝您的非常有趣的賽道。 – BBBreiz

當用戶單擊按鈕時，您還可以使用onMouseDown和onMouseUp偵聽器更改樣式。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.button, .button_clicked { 
    position:absolute; 
    left:50%; 
    top:50%; 
    width:200px; 
    height:200px; 

    margin-left:-100px; 
    margin-top:-100px; 

    background-color:#F00; 

    border-style:outset; 
    border-color:#F88; 
    border-width:7px; 

} 
.button_clicked { 
    border-style:inset; 
    background-color:#C00; 
} 

</style> 
</head> 
<body> 

<div class="button" 
onmousedown="this.className='button_clicked'" 
onmouseup="this.className='button'" 
onmouseout="this.onmouseup()" 
onclick="alert('You clicked me')" 
></div> 

</body> 
<script> 

</script> 
</html>

來源

2011-12-05 15:10:39

確實聰明的網站！兩個非常快速的答案，完全覆蓋了我提出的問題的兩條線。非常感謝你。 – BBBreiz

我會避免做內聯的JavaScript，這不是好的設計。如果您必須將事件分配給元素，請改爲使用javascript事件處理程序：'document.getElementById（「id_of_your_element」）。onclick = function（）{some javascript code here ...};' – kand

取決於需求， d通常同意。爲簡單起見，這裏是內聯的。 –

使用Javascript的HTML頁面翻新

回答

相關問題