要求：5秒后自动跳转到https://www.google.com页面
- 步骤分析
分析： 1.显示页面效果 <p> 2.倒计时读秒效果实现 2.1 定义一个方法，获取span标签，修改span标签体内容，时间-- 2.2 定义一个定时器，1秒执行一次该方法 3.在方法中判断时间如果<= 0 ，则跳转到首页
- 步骤实现
第一步：显示页面效果
<p align="center"> <spen id="time">5</spen>秒之后自动跳转页面 ... </p>
第二步：CSS描述显示
<style> p { text-align: center; } #time { color: red; } </style>
第三步：定义一个方法，获取spen标签，修改spen标签的内容（时间减1）
var second = 5; function showTime() { second --; if(second >= 0) { // 获取spen标签对象 var elementById = document.getElementById("time"); // 修改span标签体内容 elementById.innerHTML = second + ""; } else { location.href = "https://www.google.com"; } }
第四步：定义一个定时器，每隔一秒钟，执行一次定义的showTime方法
// 每隔 1 秒执行一次showTime方法 setInterval(showTime, 1000);
- 所有步骤代码如下所示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转页面</title> <style> p { text-align: center; } #time { color: red; } </style> <script> var second = 5; function showTime() { second --; if(second >= 0) { // 获取spen标签对象 var elementById = document.getElementById("time"); // 修改span标签体内容 elementById.innerHTML = second + ""; } else { location.href = "https://www.google.com"; } } // 每隔 1 秒执行一次showTime方法 setInterval(showTime, 1000); </script> </head> <body> <p align="center"> <spen id="time">5</spen>秒之后自动跳转页面 ... </p> </body> </html>