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

最新推荐文章于 2024-04-08 23:38:25 发布

请叫我二狗哥

最新推荐文章于 2024-04-08 23:38:25 发布

阅读量1.5k

点赞数

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

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

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

版权

Javascript 同时被 2 个专栏收录

57 篇文章 3 订阅

订阅专栏

基础案例

39 篇文章 1 订阅

订阅专栏

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

<!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写好代码后，用浏览器打开代码，点击相关按钮，却没有任何反应，想一想这是为什么？

请叫我二狗哥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS网页特效实例：让网页前进和后退

在浏览一些文档形式的网页时，往往需要给用户提供这样两个功能：前进和后退。用户通过单击按钮打到访问之前网页和之后网页的功能。请补充下面代码，让点击按钮实现页面前进和后退效果。在history对象里，还有一个go()函数，其有一个整型参数，当参数为正数时表示前进N页；当参数为负数时表示后退N页。例如go(-1)的效果与back()函数的效果一样。思考：当在VScode写好代码后，用浏览器打开代码，点击相关按钮，却没有任何反应，想一想这是为什么？
复制链接

扫一扫