>  기사  >  웹 프론트엔드  >  HTML 페이지를 3초 후에 자동으로 점프시키는 3가지 방법

HTML 페이지를 3초 후에 자동으로 점프시키는 3가지 방법

一个新手
一个新手원래의
2017-09-08 13:05:2716632검색

프로젝트에서 N초 후에 페이지가 자동으로 이동하도록 구현하는 방법과 같은 기능을 자주 접하게 됩니다. 실제로 방법은 매우 간단합니다. 이 기사에서는 3초 후에 HTML 페이지를 자동으로 점프하는 세 가지 일반적인 방법을 공유하겠습니다. 3초 후 HTML 페이지의 자동 점프에 대한 지식에 관심이 있는 친구는

연습 에서 우리는 종종 N초 후에 페이지의 자동 이동을 구현하는 방법에 대한 문제에 직면합니다.

제가 직접 문제에 부딪혀 정보를 찾아보고 3가지 방법을 정리했습니다

방법 1:

가장 간단한 방법: 코드를 앞쪽 93f0f5c25f18dab9d176bd4f6de5d30e에 직접 추가합니다.

코드는 다음과 같습니다.

<span style="font-size:18px;"> </span>
<span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=res.html"> </span>
<span style="font-size:24px;">//3秒之后自动跳转到res.html

두 파일은 동일한 파일에 속합니다. jsp 페이지로 이동해야 하는 경우 URL에 URL 주소를 입력해야 합니다. --- (브라우저의 주소 표시줄에 기록된 데이터: http: //localhost:8080/TestDemo /1.jsp)54bdf357c58b8a65c66d7c19c8e4d114

방법 2:
밀리초 값을 지정한 후 표현식을 계산하려면 window:

setTimeout의 방법을 사용해야 합니다.

예:

코드는 다음과 같습니다.

window.setTimeout("alert(&#39;Hello, world&#39;)", 1000);

js 코드로 작성되었습니다.

구체적인 구현은 다음과 같습니다.

코드는 다음과 같습니다.

<script type="text/javascript">
onload=function(){ <span style="white-space:pre"> </span>//在进入网页的时候加载该方法
setTimeout(go, 3000); <span style="white-space:pre"> </span> /*在js中是ms的单位*/
};
function go(){
location.href="http://localhost:8080/TestDemo/index.jsp";
}
</script>
//3秒之后自动执行go方法,直接跳转到index.jsp页面

방법 3:
결함 위의 두 가지 예 중 점프를 구현할 수는 있지만 언제 점프해야 할지 모르겠습니다.

settimeout 메소드를 더 이상 수행할 수 없습니다.

setInterval은 매번 표현식을 계산합니다. 지정된 밀리초 값이 전달됩니다.

동일한 시간이 지나지 않으면 해당 기능이 실행됩니다. 구체적인 구현 방법:

코드는 다음과 같습니다.

<script type="text/javascript">
onload=function(){
setInterval(go, 1000);
};
var x=3; //利用了全局变量来执行
function go(){
x--;
if(x>0){
document.getElementById("sp").innerHTML=x; //每次设置的x的值都不一样了。
}else{
location.href=&#39;res.html&#39;;
}
}
</script>

위 내용은 HTML 페이지를 3초 후에 자동으로 점프시키는 3가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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