主要使用JavaScript中的document.getElementById(),setInterval()和location.href方法,具体代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跳转</title> <style> p{ text-align: center; } span{ color: red; } </style> <script> /* 分析: 1、显示页面效果<p> 2、倒计时5秒效果实现 2.1定义一个方法,获取span标签,修改span标签体内容 2.2定义一个定时器,1秒执行一次该方法 3、在方法汇总判断时间,如果<=0,则跳转到 */ //倒计时5秒效果实现 var second = 5; function ShowTime() { second--; //判断时间<=0,则跳转到首页 if(second<=0){ location.href = "https://www.baidu.com/"; } var time = document.getElementById("time"); time.innerHTML = second+" "; } //设置定时器,1秒执行一次 setInterval(ShowTime,1000); </script> </head> <body> <p> <span id="time">5</span>秒之后,自动跳转到首页 </p> </body> </html>实现效果如下所示:
跳转后: