用Javascript刷新HTML页面 [英] HTML page refreshment with Javascript
问题描述
我有一个茶点问题:在我的页面中，我使用了从icon + CSS类创建的按钮.当我的用户按下按钮时，我想使其在半秒钟内看起来处于按下状态，以便用户可以确定他已经单击了该图标: 为此，我更改了按钮对象的内容，在"var"中捕获了"resting"代码，然后保留了相同的图标，但在选定的时间内将"resting button"类替换为"pressed button"类，最后恢复休息"代码.
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.
不幸的是，除非我在代码中间插入警报"以检查它是否正确，否则不会出现此效果:如何强制Javascript刷新HTML页面，以便可以看到按下的按钮在我选择的时间内，然后再次按下?
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?
下面是代码:(您可能猜想是从法国来的.如果您想进行实际检查，请在与html页面相同的目录中创建一个图标"loupe.ico".)
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>
推荐答案
使用JavaScript计时器:
Use a javascript timer:
http://bonsaiden.github.com/JavaScript-Garden/#other.超时
setTimeout是您可能想使用的.只需设置按钮图标，然后在计时器中就有一个功能，可以在时间用完时将其切换回去.
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.
这篇关于用Javascript刷新HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
