黑马程序员技术交流社区

标题: JS自动跳转 [打印本页]

作者: 这个好吃给你吃 时间: 2019-4-26 18:40
标题: JS自动跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转</title>
<style>
      p{
         text-align: center;
      }
      span{
         color:red;
      }

</style>

</head>
<body>
<p>
      <span id="time">5</span>秒之后，自动跳转到首页...
</p>

<script>
      /*
         分析：
            1.显示页面效果  <p>
            2.倒计时读秒效果实现
               2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
               2.2 定义一个定时器，1秒执行一次该方法
            3.在方法中判断时间如果<= 0 ，则跳转到首页

      */
   // 2.倒计时读秒效果实现

      var second = 5;
      var time = document.getElementById("time");

      //定义一个方法，获取span标签，修改span标签体内容，时间--
      function showTime(){
         second -- ;
         //判断时间如果<= 0 ，则跳转到首页
         if(second <= 0){
            //跳转到首页
            location.href = "https://www.baidu.com";
         }

         time.innerHTML = second +"";
      }

      //设置定时器，1秒执行一次该方法
      setInterval(showTime,1000);

</script>
</body>
</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2