编写js通过定时器的使用实现页面的自动跳转功能

最新推荐文章于 2023-11-06 20:21:16 发布

爱睡觉的小馨

最新推荐文章于 2023-11-06 20:21:16 发布

阅读量764

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_45696288/article/details/111460509

版权

js 专栏收录该内容

24 篇文章 7 订阅

订阅专栏

方案一：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>定时跳转</title>
    <style>
      body{background:gray;}
      div{margin:20px auto;width:350px;height:150px;border:1px solid #000;background:white;padding:10px;}
      h2{text-align:center;}
      span{font-size:150%;color:red;margin:0 10px;}
    </style>
  </head>
  <body>
    <div>
      <h2>提交成功</h2>
      <a href="http://www.example.com">
        <span id="seconds">3</span>秒后系统会自动跳转，也可单击此链接跳转
      </a>
    </div>
    <script>
      function timing(secs, url) {
        var seconds = document.getElementById('seconds');
        seconds.innerHTML = secs--;
        if (secs > 0) {
          setTimeout('timing(' + secs + ', \'' + url + '\')', 1000);
        } else {
          location.href = url;
        }
      };
      timing(8, 'http://www.example.com');
    </script>
  </body>
</html>

方案二：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>定时跳转</title>
    <style>
      body{background:gray;}
      div{margin:20px auto;width:350px;height:150px;border:1px solid #000;background:white;padding:10px;}
      h2{text-align:center;}
      span{font-size:150%;color:red;margin:0 10px;}
    </style>
  </head>
  <body>
    <div>
      <h2>提交成功</h2>
      <a href="http://www.example.com">
        <span id="seconds">5</span>秒后系统会自动跳转，也可单击此链接跳转
      </a>
    </div>
    <script>
      function timing(secs, url) {
        var seconds = document.getElementById('seconds');
          if (secs > 0) {
          var timer = setInterval(all, 1000);
          
          function all(){
          seconds.innerHTML = --secs;
          if(secs<=1){
          clearInterval(timer);
          location.href = url;
          }
        }
        } 
      };
      var seconds = document.getElementById('seconds');
      timing(seconds.innerHTML, 'http://www.example.com');
    </script>
  </body>
</html>

爱睡觉的小馨

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
编写js通过定时器的使用实现页面的自动跳转功能

方案一：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>定时跳转</title> <style> body{background:gray;} div{margin:20px auto;width:350px;height:150px;border:1px solid #000;backgrou.
复制链接

扫一扫