html5 Previous page Next page

In HTML5, HTML buttons and JavaScript functions are used to implement the previous page/next page function. The specific steps are as follows:

1. Create HTML button, specify the onclick event response click event;
2. Define JavaScript functions:
   2.1 Previous page function: Check the history, if the previous page exists, it will be returned;
   2.2 Next page function: Get the current URL. If there is a page number parameter, it will jump to the next page, otherwise it will indicate that there is no next page.

HTML5 Previous page/Next page

How to implement the HTML5 previous page/next page function?

HTML5 provides the <button></button> element for creating buttons, where click event can be used to respond to button click events. To implement the previous page/next page function, you can use the following steps:

1. Create HTML button

 <code class="html"><button id="previous" onclick="goToPreviousPage();">上一页</button> <button id="next" onclick="goToNextPage();">下一页</button></code>

2. Define JavaScript functions

2.1 Previous page function

 <code class="javascript">function goToPreviousPage() { // 获取历史记录let history = window.history; // 如果存在上一页if (history.length > 1) { // 返回上一页history.back(); } }</code>

2.2 Next page function

 <code class="javascript">function goToNextPage() { // 获取当前URL let url = window.location.href; // 如果URL 中有页码参数if (url.includes('page=')) { // 获取当前页码let currentPage = Number(url.split('page=')[1]); // 跳转到下一页window.location.href = url.replace('page=' currentPage, 'page=' (currentPage 1)); } // 否则没有下一页else { alert('没有下一页了'); } }</code>

The above is the detailed content of html5 Previous page Next page. For more information, please follow other related articles on the PHP Chinese website!