JQuery 시작 - 진행률 표시줄
17850 단어 jquery
JQuery는 Javascript 라이브러리로 JQuery에서 사용할 수 있습니다.com 다운로드, 로컬에 놓고
이것은 문서가 완전히 불러오기 전에 jQuery 코드를 실행하는 것을 방지하기 위해서입니다.문서가 완전히 불러오기 전에 함수를 실행하면 작업이 실패할 수 있습니다.
Jquery 선택기는 얘기 안 할게요.두 가지 주의해야 할 부분은 모두 끝났습니다. 다음은 실례를 보여 드리겠습니다. 저는 예전에 일반적인 자바스크립트로 쓴 진도표를 jquery로 다시 한 번 썼습니다. 비록 사용하는 지식은 모두 간단하지만 쓰기에 신경을 많이 썼습니다. 왜냐하면 어떤 것들은 일반적인 자바스크립트와 다르기 때문입니다. 이것은 코드 뒤에 놓고 말합니다.다음은 진도표 전체 코드입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery </title>
<!-- google jquer y-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
var i = 0;//
// id="btn" （Start ） click ，
$("#btn").click(function(){
// id="val" （ div） ， 3000 0px 300px
$("#val").animate({width:'300px'},3000);
$(this).attr("disabled",true);// Start
$("#btnp").attr("disabled",false);// Pause
setPercent();// setPercent() ，
});
//
function setPercent()
{
//
if(i <= 100)
{
$("#percent").html(i+"%");//
i = i + 1;// +1
st = setTimeout(setPercent,3);// 3 ， 3 1%
}
//
else
{
clearTimeout(st);//
$("#btnc").attr("disabled",false);// Clear
$("#btnp").attr("disabled",true);// Pause
}
}
// id="btnc" （Clear ） click ，
$("#btnc").click(function(){
i = 0;//
$("#val").css("width","0px");//
$("#percent").html("0%");//
$("#btnp").val("Pause");//Pause value "Pause"
$("#btn").attr("disabled",false);// Start
$("#btnp").attr("disabled",true);// Pause
$("#btnc").attr("disabled",true);// Clear
});
// id="btnp" （Pause ） click ，
$("#btnp").click(function(){
// Pause，
if("Pause" == $("#btnp").val())
{
$("#val").stop();//
clearTimeout(st);//
$("#btnp").val("Go on");// Go on
$("#btnc").attr("disabled",false);// Clear
}
// Go on，
else
{
i = parseInt(delEnd($("#percent").html()));// ， ，
var temp = 30 * (100 - i);//
$("#val").animate({width:'300px'}, temp);//
setPercent();//
$("#btnp").val("Pause");// "Pause"
$("#btnc").attr("disabled",true);// Clear
}
});
//
function delEnd(str)
{
var temp="";
for(var i=0; i < str.length-1; i++)
{
temp=temp+str[i];
}
return temp;
}
});
</script>
</head>
<body>
<div id="bar" style="width:300px; height:30px; border:solid 1px; float:left;">
<div id="val" style="height:100%; background-color:#03F; width:0px;"></div>
</div>
<div id="percent" style="float:left; line-height:30px;">0%</div>
<div style="clear:both"></div>
<br />
<input id="btn" type="button" value="Start" />
<br />
<input id="btnc" type="button" value="Clear" disabled />
<br />
<input id="btnp" type="button" value="Pause" disabled />
</body>
</html>이번에는 주로 백분율의 증가를 실현하는 데 시간이 걸렸다. set Timeout () 함수를 사용해야 하기 때문이다. jquery에서 set Timeout (code, delay) 안의 코드가 함수라면 함수 이름만 쓰면 되고 인용부호도 필요 없고 괄호도 필요 없다.예를 들어functionshow()가 있는데 500ms를 설정한 후에 show()를 호출하면 jquery에 이렇게 써야 한다. set Timeout(show, 500).전통적인 자바스크립트에서는 setTimeout("show()", 500)이라고 쓴다.이 점은 setInterval()에서도 마찬가지입니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
