From 25bf086ed95b4389c4b346072af7b3bc6de4f6e6 Mon Sep 17 00:00:00 2001 From: subsub Date: Mon, 2 Dec 2024 10:26:50 +0900 Subject: [PATCH] =?UTF-8?q?2024/12/02=20=EC=A3=BC=EC=84=9D=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/webapp/publish/js/content.js | 26 +++++++++++++++---- .../webapp/publish/security_login_ajax.html | 11 ++++---- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/main/webapp/publish/js/content.js b/src/main/webapp/publish/js/content.js index 7b824dc9..2b5043a3 100644 --- a/src/main/webapp/publish/js/content.js +++ b/src/main/webapp/publish/js/content.js @@ -1586,28 +1586,35 @@ var start, change; function progressStart(time, msg) { $(".progress_bar_wrap").css("display", "flex"); + var timeText = document.querySelector(".time_text"); var bar = document.querySelector(".change_bar"); + var width = 1; var totalTime = time * 1000; // 시간 - var cmpWid = totalTime / 100; // 시간당 width + var cmpWid = totalTime / 100; // width 증가하는 시간 - start = setInterval(changeWidth, cmpWid); + start = setInterval(changeWidth, cmpWid); // 프로그레스바 시작 function changeWidth() { if (width >= 100) { - clearInterval(start); + // width 100% 됐을 때 + clearInterval(start); // 프로그래스바 멈춤 + timeText.innerHTML = "100%"; setTimeout(function () { + // 100%되고 1초 후 잠시만 기다려주세요 변경 및 애니메이션 추가 timeText.innerHTML = "잠시만 기다려주세요..."; $(".time_text").addClass("animation"); }, 1000) + // 메시지 있을 때 alert 띄움 if (msg !== "" && msg !== undefined && msg !== null) { alert(msg); } else {} } else { + // width 증가 및 text 변경 width++; bar.style.width = width + "%"; timeText.innerHTML = width + "%"; @@ -1615,17 +1622,22 @@ function progressStart(time, msg) { } } +// 프로그레스바 완료 function progressComplete(msg,time,backtime) { + change = setInterval(changeText); var width = 1; function changeText() { + var widthText = $(".change_bar").attr("style"); - widthText = widthText.replace(/[width:%;overfloen]/ig, ""); + widthText = widthText.replace(/[width:%;overfloen]/ig, ""); // width 값 퍼센트로 가져오기 + if (width >= 100) { $(".time_text").text("100%"); if(backtime>=time){ + // 예상시간보다 먼저 처리됐을 경우 setTimeout(function () { $(".time_text").text("잠시만 기다려주세요..."); $(".time_text").addClass("animation"); @@ -1638,12 +1650,16 @@ function progressComplete(msg,time,backtime) { }, 0); } else { + // width 증가 및 text 변경 width++; $(".time_text").text(width + "%"); $(".change_bar").css("width", width + "%"); } } - clearInterval(start); + + clearInterval(start); // 프로그레스바 시작 멈추기 + + // 메시지 있을 때 alert 띄움 if (msg !== "" && msg !== undefined && msg !== null) { setTimeout(function () { alert(msg); diff --git a/src/main/webapp/publish/security_login_ajax.html b/src/main/webapp/publish/security_login_ajax.html index 10a521e1..bcc0fa0b 100644 --- a/src/main/webapp/publish/security_login_ajax.html +++ b/src/main/webapp/publish/security_login_ajax.html @@ -46,7 +46,7 @@ //progressStart(time, msg); - var time = 3; + var time = 3; // 예상시간 $.ajax({ type: "GET", @@ -61,9 +61,11 @@ // 성공 실패 분기처리 if (data.status == 'OK') { + // 성공 시 프로그레스바 100% 로 변경 + // 예상 성공시간 = time, 백단 성공시간 == params.sleep progressComplete(data.message,time,params.sleep); - //$(".progress_bar_wrap").hide(); } else if (data.status == 'BAD_REQUEST') { + // 실패시 alert 띄우고 닫기. alert(params.f_msg); $(".progress_bar_wrap").hide(); } @@ -73,21 +75,20 @@ }, beforeSend: function (xmlHttpRequest) { + // 프로그레스바 시작 progressStart(time); }, complete: function (xhr, textStatus) { // 실패든 성공이든 ajax - // 성공 alert 먼저 뜨고 그다음에 언제 꺼질지. + // alert 먼저 뜨고 그다음에 언제 꺼질지. var delay = (time - params.sleep) * 1000; if (time > params.sleep) { setTimeout(function () { $(".progress_bar_wrap").hide(); }, delay); - } else { - $(".progress_bar_wrap").hide(); }