> 웹 프론트엔드 > JS 튜토리얼 > Ajax 로딩 상자 example_javascript 기술을 구현하기 위한 JavaScript 시뮬레이션

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

WBOY
풀어 주다: 2016-05-16 16:33:55
원래의
1415명이 탐색했습니다.

이 글의 예시에서는 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)

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿