Question

我遇到了茶点问题：在我的页面中，我使用了我从icon + CSS类创建的按钮。当我的用户按下按钮时，我希望在半秒内让它看起来按下，以便用户可以确定他已经点击了图标：为此，我更改按钮对象的内容，捕获“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>

Answer 1

使用javascript计时器：

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

setTimeout是您可能想要使用的。只需设置按钮图标，然后在计时器中有一个功能，可以在时间用完时将其切换回来。

Answer 2

您还可以使用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>

使用Javascript进行HTML页面刷新

2 个答案: