HTML page refreshment with Javascript

问题

I'm having a refreshment problem: In my pages, I use buttons that I create from icon + CSS class. When my user presses the button, I want to make it look pressed during half a second, so that the user can be sure he has clicked the icon: To do that, I change the content of the button-object, capturing the "resting" code inside a "var", then keeping the same icon but replacing the "resting button" class by the "pressed button" one during a chosen time, and in the end restore the "resting" code.

Unfortunately, unless I insert an "alert" in the middle of my code to check it is correct, the effect doesn't appear: How can I force Javascript to refresh the HTML page, so that I can see my button pressed during the time I chose, then unpressed again?

Here's the code: (From France, as you can guess. If ever you want to check it in real, please create an icon 'loupe.ico' in the same directory as the html page).

<!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>

回答1:

Use a javascript timer:

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

setTimeout is what you probably want to use. Just set the button icon, and then have a function in your timer that switches it back when time runs out.

回答2:

You could also use onMouseDown and onMouseUp listeners to change the style when the user clicks the button.

<!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>

来源：https://stackoverflow.com/questions/8386698/html-page-refreshment-with-javascript

标签

javascript

page-refresh