javascript 은 타이머 기반 진도 바 기능 인 스 턴 스 를 실현 합 니 다.
자 바스 크 립 트 의 타이머
window 도 일 선 아래 방법
window.setInterval()타이머 시작1.setInterval(function(함수),time(몇 시간 마다 함 수 를 실행 하고 단 위 는 밀리초)
어떤 작업 을 반복 합 니 다.
2.setTimeout 은 일정 시간 지연 시 킨 다음 에 어떤 조작 을 한다.
setTimeout(function,time) ,setTimeout 은 중복 되 지 않 습 니 다!타이머 정지
setTimeoout 에 대응 하 는 것 은 clearTimeout(대상)입 니 다. 설 정 된 setTiemout 대상 지우 기
setInterval 에 대응 하 는 것 은 clearInterval(대상)입 니 다. 설 정 된 setInterval 대상 지우 기
하나의 사례 를 제시 하 다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net js </title>
<style type="text/css">
#outer/* */
{
margin-top:100px;
border:solid black 1px;
background-color:white;
width:1004px;
height:54px;
}
#inner/* */
{
background-color:red;
width:0px;/* 0， show（） ！*/
height:50px;
margin-left:2px;
margin-top:2px;
}
</style>
<script language="javascript">
function show()
{
if(document.getElementById("inner").offsetWidth<1000)//offsetWidth width ， style.width （px）！
{
document.getElementById("inner").style.width=
document.getElementById("inner").offsetWidth+20+"px";// show() 20！
console.log(document.getElementById("inner").style.width);//console ： width ( F12)
}
else
{
document.getElementById("inner").style.width=1000+"px";// 1000px ， 1000px border-width;!
stop();// ！
}
}
var timer;// ， ！
function start()
{
timeer = window.setInterval(show,200);// 200ms show
}
function stop()
{
timer = window.clearInterval(timer);
}
</script>
</head>
<body onload="start()">
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>
프로그램 을 실행 할 때 웹 페이지 의 진도 바 가 불 러 옵 니 다.불 러 오 는 속 도 는 시간 과 관계 가 있 습 니 다!
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
