Недавно я создал простую веб-страницу настроек. Поскольку мне нужно было перезапустить функцию устройства, я хотел добавить к ней всплывающий интерфейс обратного отсчета.
Первоначальная идея заключалась в том, чтобы настроить всплывающее окно с оповещением, но вскоре я обнаружил, что оповещение всегда будет оставаться там в ожидании подтверждения нажатия, а не желаемого эффекта автоматического и непрерывного отображения.
Позже я подумал, что можно будет напрямую отображать и скрывать всплывающие окна, созданные из DIV. Исходя из этой идеи, имеем следующее:
Сначала посмотрим на рендеры:
Посмотрите еще раз на исходный код:
Скопируйте код кода следующим образом:
<!------------------ Всплывающее окно подготовки к перезапуску --------------->
<div id="reboot_pre">
<div><b>Подготовка</b></div>
<br /><br />
<div><p style="margin-left:50px">Мы прилагаем все усилия, чтобы подготовить вас к операции перезапуска... Это займет <span id="reboot_pre_time">4</span> секунд</p> </див>
<br />
<div><button type="button" onclick="reboot_cancel()">Отмена</button></div>
</div>
<!------------------ Всплывающее окно подготовки к перезапуску --------------->
<!------------------ Перезапустите операцию, чтобы появилось всплывающее окно --------------->
<div id="reboot_ing">
<div><b>В процессе</b></div>
<br />
<div><p style="margin-left:40px">Выполняется перезапуск операции... Это займет <span id="reboot_ing_time">14</span> секунд</p></div>
<br />
<div id="progress_reboot" style="margin-left:40px;color:#00DB00;font-family:Arial;font-weight:bold;height:18px">|</div>
<br />
</div>
<!------------------ Перезапустите операцию, чтобы появилось всплывающее окно --------------->
lt;тип сценария="текст/javascript">
вар cancel_flag = 0;
вар уже = 0;
/* Операции выполняются сразу после загрузки веб-страницы*/
window.onload = перезагрузка();
/* Нажмите кнопку перезагрузки */
функция перезагрузки(){
if(confirm("Эта операция отключит все текущие соединения и перезагрузит ваше устройство. Вы уверены, что хотите продолжить?")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|";
download_flag = 0;
флаг отмены = 0;
уже = 0;
setTimeout("showDiv('reboot_pre')",500);
задержкаPre_reboot("reboot_pre_time");
}
}
/* Всплывающее окно перезапуска подготовки на 5 секунд*/
функция задержкиPre_reboot(str) {
если(!cancel_flag){
вар задержка = document.getElementById(str).innerHTML;
если (задержка > 0) {
задерживать--;
document.getElementById(str).innerHTML = задержка;
setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
} еще {
скрытьDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
задержкаDo_reboot("reboot_ing_time");
}
}
}
/* Перезапуск всплывающего окна в течение 15 секунд*/
функция задержкиDo_reboot(str){
display_reboot (100);
вар задержка = document.getElementById(str).innerHTML;
если (задержка > 0) {
задерживать--;
document.getElementById(str).innerHTML = задержка;
setTimeout("delayDo_reboot('reboot_ing_time')", 1000);
} еще {
скрытьDiv("reboot_ing");
alert("Перезагрузка прошла успешно!");
}
}
/* Событие кнопки отмены при подготовке к перезапуску*/
функция restart_cancel(){
отменить_флаг = 1;
скрытьDiv("reboot_pre");
alert("Вы успешно отменили операцию перезапуска!");
}
/* Отображение всплывающего окна */
функция showDiv (str){
document.getElementById(str).style.visibility = "видимый";
}
/*Скрыть всплывающее окно*/
функция скрытьDiv (строка) {
document.getElementById(str).style.visibility = "скрытый";
}
/* Перезапускаем отсчет времени всплывающего окна и перемещаем полосу буфера*/
функция display_reboot(макс){
уже++;
вар dispObj = document.all.progress_reboot;
dispObj.style.width = 100,0*already/max+"px";
document.all.progress_reboot.innerHTML += "|||||";
var timer = window.setTimeout("display("+max+")",1000);
если (уже >= макс){
window.clearTimeout(таймер);
}
}
</скрипт>