up
down
Close
架站盒子
Web Development Box
 

JavaScript 設定幾秒後跳轉頁面

│ 7173 Views │ JavaScript
JavaScript 設定幾秒後跳轉頁面
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秒後跳轉頁面

說明

  1. setTimeout:設定秒數。
  2. location.href:目標網址。
  3. 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();

說明

  1. var count:定義變數,變數可自訂。
  2. document.getElementById("timeBox"):找到id為timeBox的元素。
  3. innerHTML:將字串插入指定的元素之HTML中。
  4. x -= y:相當於 x = x - y。
  5. location.href:轉址
  6. setTimeout:設定秒數(單位是毫秒)
  7. ("countDown()",1000):每秒執行一次 countDown()

延伸閱讀

本文是否對您有幫助?