1

我有一个提神问题：在我的页面中，我使用从图标 + 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>
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 回答