JavaScript 設定幾秒後跳轉頁面

1. 跳轉頁面語法
2. 幾秒後跳轉語法
3. 頁面上顯示倒數＋跳轉頁面

跳轉頁面語法

如果希望使用 JavaScript 來跳轉頁面，只需要用location.href即可達成，location接口表示連結的位置，href即是 URL 地址，location.href="XXX"，後面的 XXX 即是網址。

location.href="/"; //跳轉首頁



如果希望某個按鈕點下去後跳轉到指定的頁面，則需要加上onclick，再把location.href寫在裡面，由於已經用"包起來，因此裡面要改為'。



<button onclick="location.href='/'">點我去首頁</button>



範例

點我去首頁


幾秒後跳轉語法


有時候我們可能會希望在某些交互動作後實現「幾秒後跳轉」的功能，這時候只需要設定setTimeout即可。



setTimeout("location.href='https://kumo.tw/'",3000); // 3秒後跳轉頁面



說明

setTimeout：設定秒數。
location.href：目標網址。
3000：毫秒，設定1000為1秒。


頁面上顯示倒數＋跳轉頁面


如果希望在瀏覽器上顯示倒數秒數，可以將倒數秒數的結果寫在指定的元素裡，具體作法請參考以下範例。


HTML

<div id="timeBox"></div>



JavaScript

// 設定秒數
var count = 5;
function countDown(){
	// 將秒數寫在指定元素中
	document.getElementById("timeBox").innerHTML= count;
	// 每次執行就減1
	count -= 1;
	// 當 count = 0 時跳轉頁面
	if (count == 0){
		location.href="https://kumo.tw/";
	}
	// 設定每秒執行1次
	setTimeout("countDown()",1000);
}
// 執行 countDown
countDown();



說明


var count：定義變數，變數可自訂。
document.getElementById("timeBox")：找到id為timeBox的元素。
innerHTML：將字串插入指定的元素之HTML中。
x -= y：相當於 x = x - y。
location.href：轉址
setTimeout：設定秒數（單位是毫秒）
("countDown()",1000)：每秒執行一次 countDown()
延伸閱讀
JavaScript 透過 id、class、html標籤替換文字
JavaScript 隨機取亂數＋自訂區間＋不重複
CSS 如何選擇所有子元素？
JavaScript 點擊按鈕動態建立 Audio 音樂播放
CSS 滑鼠經過時顯示懸浮文字