JavaScriptによるHTMLページのリフレッシュ

私はリフレッシュの問題があります：私のページでは、icon + CSSクラスから作成したボタンを使用します。ユーザーがボタンを押したときに、半分の時間の間ボタンを押して、アイコンをクリックしたことを確認できるようにしたい：これを行うには、ボタンオブジェクトの内容を変更し、選択された時間内に「休止ボタン」クラスを「休止ボタン」クラスに置き換え、最後に「休憩」コードを復元することによって、「休止」コードを「var」内に保持することができる。JavaScriptによるHTMLページのリフレッシュ

残念ながら、コードの途中に「アラート」を挿入しない限り、その効果は表示されません。どのようにしてJavascriptにHTMLページを更新して自分のボタンが見えるようにすることができますか私が選んだ時間の間に押された、そして再び押された？

ここにコードがあります：（あなたが推測できるように、実際にそれをチェックしたい場合は、loupe.icoというアイコンをhtmlページと同じディレクトリに作成してください）。

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

のsetTimeoutは、おそらく使用したいものである：

<!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のタイマーを使用してください。ボタンアイコンを設定するだけで、時間がなくなったときにタイマーに戻す機能があります。

出典

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

確かに賢いサイト！私が提起した質問の2つの行を正確にカバーする2つの非常に迅速な回答。どうもありがとうございました。 – BBBreiz

私はインラインのjavascriptをやってはいけません。良いデザインではありません。要素にイベントを割り当てる必要がある場合は、 'document.getElementById（" id_of_your_element "）。onclick = function（）{javascript code here ...};' – kand

に依存しますが、 dは通常同意する。簡単にするために、ここにはインラインです。 –

JavaScriptによるHTMLページのリフレッシュ

答えて

関連する問題