js에서 카운트다운 점프 페이지를 구현하는 방법-HTML 지식-php.cn

집

일일 프로그램

HTML 지식

js에서 카운트다운 점프 페이지를 구현하는 방법

藏色散人

Nov 17, 2018 pm 05:17 PM

이 글에서는 카운트다운 점프 페이지 효과를 구현하기 위한 js의 방법을 주로 소개합니다.

주로 웹페이지 사용을 더욱 사용자 친화적으로 만들기 위해 주요 웹사이트를 탐색할 때 모든 사람이 카운트다운 페이지 이동 효과를 경험했을 것입니다.

아래에서는 특정 코드 예제를 사용하여 js에서 새 페이지로 이동하는 카운트다운을 구현하는 방법을 설명합니다.

js 카운트다운 점프 코드 구현예제는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面跳转</title>
    <style>
 *{
            margin:0;
 padding:0;
 }
        a{text-decoration: none;color: #fff;font-size: 30px;text-shadow: 1px 2px 10px red;}
       p{
            height:50px;
 width: 320px;
 margin:100px auto;
 }
        span{ 
            display: inline-block;
 height: 50px;
 width:50px;
 line-height: 50px;
 font-size: 50px;
 color: #f00;
 text-align: center;
 }

    </style>
</head>
<body>
  <p>还剩<span>5</span>秒跳转至<a href="http://www.php.cn">php中文网</a></p>
   <script type="text/javascript">
 var Espan=document.getElementsByTagName("span")[0]
      var i=4
 function fuc() {
         if (i>0){
            Espan.innerHTML=i
            i--
         }else{
             window.location.href="http://www.php.cn"
 }
      }
        setInterval("fuc()",1000)
   </script>
</body>

</html>

로그인 후 복사

위 코드의 js 부분에서 먼저 getElementsByTagName 메소드를 통해 범위 태그 객체를 얻은 다음 변수 i를 정의합니다. 여기서 i는 시간. 그런 다음 if 문을 사용하여 i가 0보다 큰지 먼저 확인합니다. 0보다 큰 경우 innerHTML 메서드를 통해 콘텐츠 i를 삽입하고, 그렇지 않으면 "http://www.php.cn" 페이지로 이동합니다. 마지막으로 setInterval() 메소드를 사용하여 fuc() 함수를 호출합니다.

그런 다음 프런트 데스크에서 달성한 최종 카운트다운 점프 효과는 아래와 같습니다.

js에서 카운트다운 점프 페이지를 구현하는 방법