Ajax 로딩 상자 example_javascript 기술을 구현하기 위한 JavaScript 시뮬레이션

이 글의 예시에서는 Ajax 로딩 박스를 구현하기 위한 자바스크립트 시뮬레이션 방법을 설명하고 있으며, 참고용으로 모두와 공유합니다. 구체적인 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function loading(p_value,str)
{
if(p_값)
{
if (!document.getElementById("load_area"))
{
var para1 = document.createElement("span");
var node=document.createTextNode(str);
para1.appendChild(노드);
var para=document.createElement("div");
para.id="load_area"
var top=document.body.scrollTop document.documentElement.scrollTop;//페이지의 실제 높이 가져오기
top_position = 상단 157 "px";
para.style.top =top_position;
icon.style.cssText = ";vertical-align:middle;padding-right:4px;margin-top:-2px;"
para.style.cssText =
";위치:절대;왼쪽:50%;너비:140px;여백-왼쪽:-70px;높이:50px;줄 높이:50px;글꼴-크기:18px;text-overflow:ellipsis;오버플로:숨김; 흰색- 공간:nowrap;text-align:center;배경색: #000;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5);color:#eee;" ;

var 아이콘 = 새 이미지();
icon.src="images/loading1.gif";//여기서
를 실제 경로로 바꾸세요. document.body.appendChild(para);

para.appendChild(아이콘);

para.appendChild(para1);

}
그 외
{
document.getElementById("load_area").style.display="block";
}
}
그 외
{
document.getElementById("load_area").style.display="none"
}
}

호출 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

loading(true," 로드 중..." ); 로드 중(false)

이 글이 모든 분들의 웹 프론트엔드 프로그래밍 설계에 도움이 되기를 바랍니다.