며칠 전에 JS를 배웠고 두 가지 매우 흥미로운 기능, 즉 Settimeout 기능과 SetInterval 기능을 보았습니다. 이 두 기능은 웹 페이지가 그림 회전 목마와 같은 웹 페이지에 매우 일반적인 영향을 미칠 수 있으며 매우 재미있는 효과를 만들 수 있습니다. 아래 의이 두 기능에 대해 알아 보겠습니다!
Settimeout 함수 및 SetInterval 함수의 구문 및 응용
1. 세트 타임 아웃 함수
정의 및 사용 : settimeout () 메소드는 지정된 밀리 초 후에 함수를 호출하거나 표현식을 계산하는 데 사용됩니다.
구문 : settimeout (Code, Millisec);
매개 변수 :
코드 (필수) : 호출 할 함수 후에 실행될 JavaScript 코드 문자열이 실행됩니다.
Millisec (필수) : 코드를 실행하기 전에 기다릴 밀리 초 수.
힌트:
settimeout ()는 코드를 한 번만 실행합니다. 여러 번 호출하려면 setinterval ()을 사용하거나 코드 자체가 settimeout ()을 다시 호출하도록하십시오.
반환 값
CODE의 주기적 실행을 취소하기 위해 Window.clearTimeout ()로 전달할 수있는 값.
Settimeout은 타이머 기능이므로 타이머를 정리하는 기능이 있으므로 Cleartimeout 기능을 사용합니다.
Cleartimeout (settimeout ()에 의해 반환 된 ID 값);
2. 세트 interval 정의
setInterVal () 메소드는 함수를 호출하거나 지정된 기간 (밀리 초)에 따라 식을 계산합니다.
setInterVal () 메소드는 clearInterVal ()가 호출되거나 창이 닫히기 전까지는 함수를 지속적으로 호출합니다. setInterval ()에 의해 리턴 된 ID 값은 clearInterVal () 메소드의 매개 변수로 사용할 수 있습니다.
문법
setInterval (코드, millisec [, "lang"]);
매개 변수 코드가 필요합니다. 호출 될 함수 또는 실행될 코드 문자열.
Millisec이어야합니다. 주기적 실행 또는 호출 코드 사이의 간격, 밀리 초
반환 값
코드의 주기적 실행을 취소하기 위해 Window.ClearInterVal ()로 전달할 수있는 값.
Settimeout은 타이머 기능이므로 타이머를 정리하는 기능이 있으므로 ClearinterVal () 함수를 사용합니다.
clearInterVal () (setInterVal ()에 의해 리턴 된 ID 값);
2. 사례 :
카운트 다운 효과
<! docType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>> <script> <script/type = "텍스트/achipt </type =" 카운트 다운 효과 Var T1을 달성하기위한 JS 방법; Window.onload = function () {// 01 시작 버튼에 위치하고 dom object var btns = document.getElementById ( 'btnstart'); // 02. 시작 버튼에 대한 클릭 이벤트를 등록 btns.onclick = function () {// setInterval 함수의 첫 번째 매개 변수를 정기적으로 실행 해야하는 함수를 실행하고 두 번째 매개 변수는 모든 milliseconds t1 = setInterval (start, 1000)을 실행하는 함수입니다. } // 03 DOM Object var btnst = document.getElementById ( 'btnstop')를 반환하기 위해 정지 버튼에 위치합니다. btnst.onclick = function () {clearinterval (t1); }} // 실행되는 함수 1 초 기능 start () {// 01. div에서 텍스트를 가져 오려면 var divdom = document.getElementById ( 'msg')에 할당하십시오. var divnum = divdom.innertext; // Divnum의 값이 0인지 (divnum> 0) {divnum--; // 빼기 값을 DiSp Divdom에 재 할당합니다. innerText = divnum; }} </script> </head> <body> <입력 유형 = "button"id = "btnstart"value = "start"/> <입력 유형 = "button"id = "btnstop"value = "stop" "stop" "msg"> 10 </div> </body> </html>배경 이미지 전환 :
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> </title> 1; // 기본 창으로 첫 번째 이미지에 초기 변수를 정의합니다. onload = function () {// 타이머 함수를 사용하여 SetInterVal (show, 1000)을 실행하여 매 초마다 표시 함수를 정의합니다. } // 실행되는 함수 함수 show () {// 이미지가 마지막 (5 그림)에 도달하면 다음 표시된 이미지를 첫 번째 이미지로 변경합니다. 마지막 그림에 도달하지 않으면 다음 이미지가 (count> 5) {count = 1; } else {count ++; } // id myimg var dom = document.getElementById ( "myimg")로 dom 객체를 가져옵니다. // IMG 태그를 가리키는 SRC 속성을 변경하고 이미지 Dom.src = "image/"+count+". jpg"} </script> </head> <body> <img src = "image/1.jpg"id = "myimg"/> </body> </html>이름 발신자
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> </title> Namer var data = [ 'Zhang San', 'Li Si', 'Wang er', 'Xiao Chen', 'Xiao Zhang']에 기본 데이터를 저장하는 배열; var i = 0; // 기본적으로 첫 번째 사람이 페이지에 표시되도록 초기 변수를 선언합니다. var t1; Window.onload = function () {// 02. 객체 var var var = document.getElementById ( "mybtn")에 대한 클릭 이벤트를 등록하려면 START-NAME 버튼의 DOM 개체를 가져옵니다. dom.onclick = function () {// SetInterVal 함수를 사용하여 결과 함수를 호출하십시오. t1 = setInterval (start, 500); //이 메소드는 settimeout (stop, 6000) 만 호출합니다. } // 변수 결과에 할당하기 위해 익명 함수를 정의하여 var start = function () {// 03 h1 태그 개체를 얻고 h1 tag var domh = document.getElementById ( "myh1")의 텍스트에 값을 할당합니다. domh.innertext = data [i % data.length]; // 기존, 요소 값 i ++ 교체; } // 익명 함수 start ()를 호출합니다. var stop = function () {// 타이머 clearinterval (t1)을 지우십시오. // 프롬프트 상자를 클릭하는 학생들은 팝업을 팝업하고 답변을 답변합니다 ( "Please" + Document.GetElementById ( "MyH1"). InnerText + "학생 답변"); }}}} </script> </head> <body> <h1 id = "myh1"> </h1> <button id = "mybtn"> 호출 시작 </button> </body> </html>위의 경우를 통해 모든 사람 이이 두 기능에 익숙해야한다고 생각합니다.
위의 기사는 Settimeout 함수와 SetInterval 함수를 깊이 이해하고 있습니다. 이 기사는 내가 당신과 공유 한 모든 콘텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.