У меня проблема с обновлением: на своих страницах я использую кнопки, которые я создаю из иконки + класс CSS. Когда мой пользователь нажимает кнопку, я хочу, чтобы она выглядела нажатой в течение полсекунды, чтобы пользователь мог быть уверен, что щелкнул значок:
Для этого я изменяю содержимое объекта кнопки, захватывая код «отдыха» внутри «var», затем сохраняя тот же значок, но заменяя класс «кнопки отдыха» на класс «нажатой кнопки» в течение выбранного времени. и в конце восстановите «отдыхающий» код.
К сожалению, если я не вставлю «предупреждение» в середину моего кода, чтобы проверить его правильность, эффект не появится: как заставить Javascript обновить страницу HTML, чтобы я мог видеть нажатой мою кнопку в течение времени, которое я выбрал, затем снова не нажал?
Вот код: (из Франции, как вы можете догадаться. Если вы когда-нибудь захотите проверить это в режиме реального времени, создайте значок «loupe.ico» в том же каталоге, что и HTML-страница).
<!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>