要求：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>