JS跳轉頁面代碼及例子

JS跳轉頁面是一種很常見的前端交互技術,下面是幾種跳轉頁面的方式:

1. 直接修改 `window.location.href` 屬性,比如:

JS跳轉頁面代碼及例子

```javascript
   window.location.href = "https://sn.qunapu.com";
   ```

2. 使用 `window.location.replace` 方法,此方法會替換當前頁面歷史記錄,不會在瀏覽器歷史記錄中留下痕跡:

 ```javascript
   window.location.replace("https://sn.qunapu.com");
   ```

3. 使用 `window.open` 方法在一個新的瀏覽器窗口或標簽頁中打開一個頁面,比如:

 ```javascript
   window.open("https://sn.qunapu.com", "_blank");
   ```

   `_blank` 參數表示在一個新窗口中打開。

4. 如果你需要在某個時間間隔後自動跳轉到目標頁面,可以使用 `setTimeout` 函數,比如:

 ```javascript
   setTimeout(function() {
     window.location.href = "https://sn.qunapu.com";
   }, 5000); // 5秒後跳轉到目標頁面
   ```

常見的頁面跳轉一般是在一些條件滿足後觸發跳轉,比如表單提交成功後、某個按鈕點擊後等。以下是一個在表單提交後跳轉頁面的例子:

```javascript
// 獲取表單元素和目標URL
var form = document.getElementById("myForm");
var redirectUrl = "http://www.example.com/success.html";
// 監聽表單提交事件
form.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止默認提交行為
  // 進行表單校驗,校驗通過則跳轉到目標頁面
  if (validateForm()) {
    window.location.href = redirectUrl;
  }
});
```

分享給朋友:

“JS跳轉頁面代碼及例子” 的相關文章

mark元素使用紅色代表及例子

mark元素使用紅色代表及例子

在HTML中,<mark> 元素可以用於標記或強調文本中的重要或關鍵內容。這個元素通常會用醒目的紅色來渲染,因為紅色是一個視覺上非常具有註意力的顏色。在這種情況下,你可以將這些關鍵字用 <mark> 標簽包圍起來,使其突出顯示。這樣可以幫助用戶更快速地發現這個型號是這個品牌的…

HTML 和 CSS 實現網頁導航欄和下拉菜單

HTML 和 CSS 實現網頁導航欄和下拉菜單

以下是一組基於 HTML 和 CSS 實現網頁導航欄和下拉菜單的完整代碼:HTML 代碼:CSS 代碼。該代碼實現了一個簡單的網頁導航欄和下拉菜單,其中 `nav` 表示導航欄,`ul` 表示菜單,`li` 表示菜單項,`a` 表示鏈接。通過設置 CSS 樣式,將菜單項設置為了懸停時出現下拉菜單,同…

一個簡單的html放煙花特效的代碼

一個簡單的html放煙花特效的代碼

以下是一個簡單的html放煙花特效的代碼,代碼說明:1. 使用html和css定義了一個煙花的基本樣式;2. 使用javascript動態生成多個煙花元素,並使用animation讓其展開,模擬煙花爆炸效果;3. 使用setTimeout函數控制煙花爆炸持續時間,並使用setInterval控制煙花…

星空特效的HTML代碼示例

星空特效的HTML代碼示例

以下是一個星空特效的HTML代碼示例:這個代碼會在頁面背景中生成100個閃爍的星星,使得整個頁面看起來像是夜空中的星空。可以在瀏覽器中運行查看效果。這些代碼可以在瀏覽器中運行並產生相應的星空特效。…

詳細解釋html標簽,每種html標簽的含義和用法

詳細解釋html標簽,每種html標簽的含義和用法

1. `<html>` 標簽:`<html>` 標簽用於定義 HTML 文檔的開始和結束。在 `<html>` 中,我們可以包含 `<head>` 和 `<body>` 標簽,以便定義文檔的頭部和主體部分。在 HTML5 中,我們可以省略…

HTML標簽屬性大全及代碼例子

HTML標簽屬性大全及代碼例子

在HTML中,屬性是在標簽中使用的特殊命令,它們提供了額外的信息以更好地描述標簽的內容和行為。屬性名表示該屬性的名稱,而屬性值表示該屬性要設置的值。HTML標簽屬性有很多種類和用途,它們可以影響標簽的內容、顏色、尺寸、超鏈接、樣式、表單等方面。一些常見的HTML標簽屬性包括:class、id、sty…