页面定时跳转【JS】

    xiaoxiao2024-11-21  2

    编程练习

    制作一个跳转提示页面:

    要求:

    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>

    转载请注明原文地址: https://ju.6miu.com/read-1293856.html
    最新回复(0)