制作一个跳转提示页面:
要求:
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>