页面定时跳转【JS】

最新推荐文章于 2023-09-25 20:42:10 发布

林次次

最新推荐文章于 2023-09-25 20:42:10 发布

阅读量1.3k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 定时器 span

本文链接：https://blog.csdn.net/lin14543/article/details/52198849

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

编程练习

制作一个跳转提示页面：

要求：

1. 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。

2. 如果点击“返回”按钮则返回前一个页面。

效果:

注意: 在窗口中运行该程序时，该窗口一定要有历史浏览记录，否则"返回"无效果。

任务

第一步：先编写好网页布局，如下:

第二步：获取显示秒数的元素，通过定时器来更改秒数。

第三步：通过window的location和history对象来控制网页的跳转

<!DOCTYPE html>
<html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
 <h1>操作成功</h1>
  <span id="num">5</span>秒后回到主页 <a href="" οnclick="back()">返回</a>
  <script type="text/javascript">  
 
   //获取显示秒数的元素，通过定时器来更改秒数。
    var e=document.getElementById("num");
    var num=5;
    var id=setInterval("mid()",1000);
    function mid(){
        num--;
        if(num==0){
            window.location="http://www.imooc.com";
            clearInterval(id);
            return;
        }
        e.innerHTML=num;
    }
   //通过window的location和history对象来控制网页的跳转。
   function back(){
       window.history.back();
   }
 </script> 
</body>
</html>

林次次

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
页面定时跳转【JS】

编程练习制作一个跳转提示页面：要求：1. 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。2. 如果点击“返回”按钮则返回前一个页面。效果:注意: 在窗口中运行该程序时，该窗口一定要有历史浏览记录，否则"返回"无效果。任务第一步：先编写好网页布局，如下:
复制链接

扫一扫