使用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页面翻新

回答

相关问题