HTML에서 자동 페이지 점프를 구현하는 5가지 방법-HTML 튜토리얼-php.cn

HTML에서 자동 페이지 점프를 구현하는 5가지 방법

不言

풀어 주다： 2018-05-07 16:18:40

원래의

3648명이 탐색했습니다.

이 글에서는 HTML의 자동 페이지 이동 방법 5가지를 주로 소개합니다. 이제는 도움이 필요한 친구들이 참고할 수 있도록 공유합니다.

이전 글에서 HTML 페이지 3을 소개했습니다. 초 후에 자동으로 점프하는 세 가지 일반적인 방법이 있습니다. 이 글에서는 계속해서 HTML 페이지 점프에 대한 관련 지식을 함께 배워보겠습니다.
자세히 설명하기 위해 아래에 5가지 예제가 나열되어 있습니다. 이 예제의 주요 기능은 5초 후에 자동으로 동일한 디렉터리에 있는 hello.html 파일로 이동합니다(필요에 따라 수정).

1) HTML 구현

코드 복사

코드는 다음과 같습니다.

<head>  
<meta http-equiv="refresh" content="5;url=hello.html">  
</head>

로그인 후 복사

장점: 단순

단점: Struts Tiles에서 사용할 수 없음

2)Javascript 구현

코드 복사

코드는 다음과 같습니다.

<mce:script language="javascript" type="text/javascript"><!--  
setTimeout("javascript:location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;", 5000);  
// --></mce:script>

로그인 후 복사

장점: 유연성, 더 많은 다른 기능과 결합 가능

단점: 다른 브라우저에 영향을 받음

3) 상호의 결합된 자바스크립트 구현(IE )

코드 복사

코드는 다음과 같습니다.

<span id="totalSecond">5</span>  
<mce:script language="javascript" type="text/javascript"><!--  
var second = totalSecond.innerText;  
setInterval("redirect()", 1000);  
function redirect(){  
totalSecond.innerText=--second;  
if(second<0) location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
}  
// --></mce:script>

로그인 후 복사

장점: 더욱 사용자 친화적입니다.

단점: firefox는 지원하지 않습니다(firefox는span, p 등의 innerText 속성을 지원하지 않습니다) .)

3) 상호 자바스크립트 구현(firefox)

코드 복사

코드는 다음과 같습니다.

<mce:script language="javascript" type="text/javascript"><!--  
var second = document.getElementById(&#39;totalSecond&#39;).textContent;  
setInterval("redirect()", 1000);  
function redirect()  
{  
document.getElementById(&#39;totalSecond&#39;).textContent = --second;  
if (second < 0) location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
}  
// --></mce:script>

로그인 후 복사

4) Firefox에서 innerText를 지원하지 않는 문제 해결 코드 코드 코드 코드는 다음과 같습니다.

위의 다섯 가지 예는 HTML의 다섯 가지 자동 페이지 이동 방법을 소개합니다.

위 내용은 HTML에서 자동 페이지 점프를 구현하는 5가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!