HTML5是一種新一代的網頁設計語言,它可以讓網頁更加美觀且更加交互。其中一個非常實用的功能就是支持左右鍵切換頁面。
<html>
<head>
<title>HTML5支持左右鍵切換頁面</title>
</head>
<body onkeydown="switchPage(event);">
<div id="page1">
<p>這是第一頁的內容……</p>
</div>
<div id="page2">
<p>這是第二頁的內容……</p>
</div>
<div id="page3">
<p>這是第三頁的內容……</p>
</div>
<script>
var currentPage = 1;
function switchPage(event) {
var e = event || window.event;
if (e.keyCode == 37 || e.keyCode == 39) { //37為左箭頭,39為右箭頭
var pages = document.getElementsByTagName("div");
if (e.keyCode == 37 && currentPage >1) {
currentPage--;
} else if (e.keyCode == 39 && currentPage< pages.length) {
currentPage++;
}
for (var i = 0; i< pages.length; i++) {
if (i == currentPage - 1) {
pages[i].style.display = "block";
} else {
pages[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
上面的代碼實現了在按下左右箭頭鍵時切換頁面的功能。首先,我們在HTML文檔中定義了三個頁面,每個頁面都以一個div元素來包含。然后,在body元素上綁定了一個onkeydown事件,當用戶按下鍵盤上的任何鍵時,都會調用switchPage函數。在switchPage函數中,我們首先判斷用戶按下的是左箭頭還是右箭頭,然后根據當前頁碼和頁面總數計算出下一頁或上一頁的頁碼。最后,我們遍歷所有的頁面元素,將除了當前頁之外的所有頁都設置為“display:none”來隱藏,只有當前頁設置為“display:block”來顯示。
有了這段代碼,您就可以很容易地實現在網頁上支持左右鍵切換頁面的功能了。無需任何插件和第三方庫,純粹使用HTML5和JavaScript即可完成。