>  기사  >  웹 프론트엔드  >  Javascript는 카운트다운 점프 page_javascript 기술을 구현합니다.

Javascript는 카운트다운 점프 page_javascript 기술을 구현합니다.

WBOY
WBOY원래의
2016-05-16 15:19:381085검색
많은 웹페이지가 비슷한 효과를 가지고 있습니다. 즉, 지정된 시간이 지나면 다른 페이지로 이동할 수 있습니다. 이 장에서는 이 효과를 얻는 방법을 소개합니다. 다음과 같습니다:

<script type="text/javascript"> 
var t=10;
setInterval("refer()",1000); 
function refer(){ 
 if(t==0){ 
 location.href="http://www.jb51.net";
 } 
 document.getElementById('show').innerHTML=""+t+"秒后跳转到脚本之家";
 t--;
} 
</script> 
<span id="show"></span> 
위 코드는 우리가 원하는 효과를 달성하며, 10초 후에 지정된 페이지로 이동할 수 있습니다. 구현 과정은 아래와 같습니다.
1. 구현 원칙:
원리는 매우 간단합니다. 즉, setInterval() 타이머 함수를 사용하여 1초에 한 번씩 Refer() 함수를 실행하는 것입니다. 이 함수는 한 번 실행하지 않고도 t를 1씩 줄이는 동시에 현재 값을 쓸 수 있습니다. t 값을 div에 추가합니다. t가 0으로 감소하면, 즉 카운트다운이 완료되면 지정된 페이지로 이동합니다. 원리는 거의 동일합니다.
2. 관련자료:
1. setInterval() 함수에 대해서는 setInterval() 함수 사용법에 대한 자세한 설명을 참조하세요.
2.location.href는 Location 객체의 href 속성 장을 참조할 수 있습니다.
3. innerHTML 속성에 대해서는 js의 innerHTML 속성 사용법 장을 참고하세요.

간단한 점프 코드 두 가지를 공유하고 요약해 보겠습니다. 다양한 시간 제한 점프 코드는 다음과 같습니다.

(1) setTimeout 함수를 사용하여 타이밍 점프 구현(본문 영역에는 다음 코드를 작성해야 함)

<script type="text/javascript"> 
//3秒钟之后跳转到指定的页面 
setTimeout(window.location.href='http://www.jb51.net',3); 
</script> 

(2) HTML 코드 구현, 페이지의 헤드 영역 블록에 다음 코드를 추가합니다

<!--5秒钟后跳转到指定的页面--> 
<meta http-equiv="refresh" content="5;url=http://www.jb51.net" /> 

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.