1

リフレッシュの問題があります。私のページでは、アイコン+CSSクラスから作成したボタンを使用しています。ユーザーがボタンを押したときに、0.5秒間押したように見せて、ユーザーがアイコンをクリックしたことを確認できるようにします。そのために、ボタンオブジェクトのコンテンツを変更して、「休憩」をキャプチャします。 「var」内の「コード」、同じアイコンを維持しながら、選択した時間内に「休止ボタン」クラスを「押されたボタン」クラスに置き換え、最後に「休止」コードを復元します。

残念ながら、コードの途中に「アラート」を挿入して正しいことを確認しない限り、効果は表示されません。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>
4

2 に答える 2

1

JavaScript タイマーを使用します。

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

setTimeout は、おそらく使用したいものです。ボタンのアイコンを設定し、時間がなくなったときに元に戻す機能をタイマーに設定するだけです。

于 2011-12-05T14:27:36.027 に答える
0

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-05T15:10:39.870 に答える