일부 시나리오에서는 웹페이지가 지정된 시간 후에 지정된 페이지로 자동으로 이동할 수 있어야 합니다. 예를 들어 지정된 웹페이지를 찾을 수 없는 경우 이전에 설정된 404 페이지가 표시되고 지정된 페이지로 이동합니다. 페이지에서 다음은 이 효과를 얻기 위한 코드입니다.
코드는 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>js指定时间之后跳转到指定页面代码实例</title> <script type="text/javascript"> function redirect() { if(second<0) { location.href='http://wwww.jb51.net'; } else { if(navigator.appName.indexOf("Explorer")>-1) { document.getElementById('totalSecond').innerText=second--; } else { document.getElementById('totalSecond').textContent=second--; } } } window.onload=function() { var second=document.getElementById('totalSecond').textContent; if(navigator.appName.indexOf("Explorer")>-1) { second=document.getElementById('totalSecond').innerText; } else { second = document.getElementById('totalSecond').textContent; } setInterval("redirect()",1000); } </script> </head> <body> <h1>找不到指定的页面</h1> <span id="totalSecond">3</span>秒后自动跳转到指定页面 </body> </html>
위 코드는 3초 후에 지정된 페이지로 이동할 수 있습니다. 다음은 구현 과정에 대한 간략한 소개입니다.
1. 구현 원칙:
타이머 기능을 사용하여 매초마다 범위 요소의 숫자를 수정합니다. 숫자가 0에 도달하면 페이지가 지정된 링크로 이동합니다. 여기서는 구체적으로 설명하지 않겠습니다. 코드 주석을 볼 수 있습니다.
2. 코드 주석:
1.function 리디렉션(){}, 점프에 대한 모호성을 선언합니다.
2.if(secondfc32a86cb0ac67d4281f67cc2539caa8-1), IE 브라우저인지 확인합니다.
5.document.getElementById('totalSecond').innerText=second--, IE 브라우저인 경우 innerText 속성을 사용하여 범위 요소에 숫자 값을 설정합니다.
6.document.getElementById('totalSecond').textContent=second--, 다른 브라우저는 textContent 속성을 사용하여 범위 요소에 숫자 값을 설정합니다.
7.window.onload=function(){}, 문서가 완전히 로드되면 함수의 코드를 실행합니다.
8.if(navigator.appName.indexOf("Explorer")>-1){}, IE 브라우저인 경우 innerText 특성을 사용하여 범위 요소의 콘텐츠를 가져옵니다.
9.second = document.getElementById('totalSecond').textContent, 다른 표준 브라우저는 textContent 속성을 사용하여 범위 요소 값을 얻습니다.
10.setInterval("redirect()",1000)은 매초 타이머 기능을 실행합니다.
3. 관련자료:
1. indexof() 함수는 JavaScript의 lastIndexOf() 메서드 사용에 대한 자세한 설명 장에서 찾을 수 있습니다.
2. setInterval() 함수에 대해서는 setInterval()과 setTimeout()의 사용법 및 차이점예제 소개 장을 참조하세요.
위 내용은 편집자가 공유한 JavaScript를 기반으로 특정 페이지로 예약 점프를 구현하는 방법에 대한 전체 설명입니다.