JS网页特效实例：让网页前进和后退

最新推荐文章于 2025-04-29 08:30:00 发布

请叫我二狗哥

最新推荐文章于 2025-04-29 08:30:00 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 基础案例文章标签： javascript 前端 html

cnblog博客：https://www.cnblogs.com/f6056/

本文链接：https://blog.csdn.net/weimob258616/article/details/127883025

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

基础案例

39 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，通过JavaScript实现前进和后退功能。利用window.history对象的back()和forward()方法，用户可以点击按钮轻松浏览历史记录中的前一个或后一个页面。然而，如果在VScode中编写并直接用浏览器打开代码，由于没有实际的浏览历史，按钮可能不会产生预期的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在浏览一些文档形式的网页时，往往需要给用户提供这样两个功能：前进和后退。用户通过单击按钮打到访问之前网页和之后网页的功能。请补充下面代码，让点击按钮实现页面前进和后退效果。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>JS网页特效实例：让网页前进和后退</title>
  <script>
    function goForward() {
    // 定义到之前的网页函数
    }
    function goBack() {
        // 定义到之后的网页函数
    }

  </script>
</head>

<body style="text-align:center;">
  <p>
    <input type="button" value="前进" onclick="goForward()" />
    <input type="button" value="后退" onclick="goBack()" />
  </p>


</body>

</html>

相关知识要点：

（1）window.history.back()、window.history.forward()

（2）window.history.go()；

在history对象里，还有一个go()函数，其有一个整型参数，当参数为正数时表示前进N页；当参数为负数时表示后退N页。例如go(-1)的效果与back()函数的效果一样。

参考代码：

    function goForward() {
      // 定义到之前的网页函数
      window.history.forward();
    }
    function goBack() {
      // 定义到之后的网页函数
      window.history.back();
    }

思考：当在VScode写好代码后，用浏览器打开代码，点击相关按钮，却没有任何反应，想一想这是为什么？