최근에 간단한 설정 웹 페이지를 만들었습니다. 장치 기능을 다시 시작해야 했기 때문에 여기에 카운트다운 팝업 인터페이스를 추가하고 싶었습니다.
초기 아이디어는 경고 팝업 창을 사용자 정의하는 것이었지만, 내가 원했던 자동적이고 연속적인 표시 효과보다는 경고가 클릭 확인을 기다리며 항상 거기에 머물러 있다는 것을 곧 알게 되었습니다.
나중에는 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> </div>
<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;스크립트 유형="텍스트/자바스크립트">
var cancel_flag = 0;
var 이미 = 0;
/* 웹페이지가 로드되자마자 수행되는 작업*/
window.onload = 재부팅();
/* 재시작 버튼 조작 클릭*/
함수 재부팅(){
if(confirm("이 작업은 현재의 모든 연결을 끊고 장치를 다시 시작합니다. 계속하시겠습니까?")){
document.getElementById("reboot_pre_time").innerHTML = 4;
document.getElementById("reboot_ing_time").innerHTML = 14;
document.all.progress_reboot.innerHTML = "|";
다운로드 플래그 = 0;
취소 플래그 = 0;
이미 = 0;
setTimeout("showDiv('reboot_pre')",500);
DelayPre_reboot("reboot_pre_time");
}
}
/* 5초간 준비 팝업창 재시작*/
함수 DelayPre_reboot(str) {
if(!cancel_flag){
var 지연 = document.getElementById(str).innerHTML;
if(지연 > 0) {
지연--;
document.getElementById(str).innerHTML = 지연;
setTimeout("delayPre_reboot('reboot_pre_time')", 1000);
} 또 다른 {
hideDiv("reboot_pre");
setTimeout("showDiv('reboot_ing')",500);
DelayDo_reboot("reboot_ing_time");
}
}
}
/* 15초 동안 팝업창 재시작 진행 중*/
함수 DelayDo_reboot(str){
디스플레이재부팅(100);
var 지연 = document.getElementById(str).innerHTML;
if(지연 > 0) {
지연--;
document.getElementById(str).innerHTML = 지연;
setTimeout("delayDo_reboot('reboot_ing_time')", 1000);
} 또 다른 {
hideDiv("reboot_ing");
Alert("재시작 성공!");
}
}
/* 재시작 준비시 취소버튼 이벤트*/
함수 재부팅_취소(){
취소 플래그 = 1;
hideDiv("reboot_pre");
Alert("다시 시작 작업을 성공적으로 취소했습니다!");
}
/* 팝업창 표시 */
함수 showDiv(str){
document.getElementById(str).style.visibility = "표시됨";
}
/*팝업 창 숨기기*/
함수 hideDiv(str){
document.getElementById(str).style.visibility = "숨김";
}
/* 진행 중인 팝업창 타이밍을 다시 시작하고 버퍼바를 이동합니다*/
함수 display_reboot(최대){
이미++;
var dispObj = document.all.progress_reboot;
dispObj.style.width = 100.0*이미/최대+"px";
document.all.progress_reboot.innerHTML += "|||||";
var 타이머 = window.setTimeout("display("+max+")",1000);
if (이미 >= max){
window.clearTimeout(타이머);
}
}
</script>