>  기사  >  웹 프론트엔드  >  JavaScript_javascript 기술을 기반으로 지정된 페이지로 예약된 점프 구현

JavaScript_javascript 기술을 기반으로 지정된 페이지로 예약된 점프 구현

WBOY
WBOY원래의
2016-05-16 15:22:321738검색

일부 시나리오에서는 웹페이지가 지정된 시간 후에 지정된 페이지로 자동으로 이동할 수 있어야 합니다. 예를 들어 지정된 웹페이지를 찾을 수 없는 경우 이전에 설정된 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를 기반으로 특정 페이지로 예약 점프를 구현하는 방법에 대한 전체 설명입니다.

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