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