WEB前端教程：掌控你的浏览器

掌握 JavaScript 的核心之一：BOM ，能够熟悉 BOM 相关操作，掌握 JavaScript 程序与浏览器交互的能力

课程目标

掌握 JavaScript 的核心之一：BOM ，能够熟悉 BOM 相关操作，掌握 JavaScript 程序与浏览器交互的能力

Window 对象

Window 对象是 BOM 的核心，用来表示当前浏览器窗口，阅读下面材料掌握操作或访问浏览器的方法和属性。

编码一

<!DOCTYPE html>
<html lang="en">
<head>
    <title>window对象练习</title>
    <script>
        var myWindow;
        function openWin() {
            //打开一个新窗口
        }

        function moveWin() {
            //移动这个新窗口
        }
        function focusWin() {
            //聚焦这个新窗口
        }
        function resize() {
            //调整这个新窗口大小
        }
        function closeWin() {
            //关闭这个新窗口
            //弹出系统对话框要求用户是否确认关闭新开的窗口
        }
        function printWin() {
            //打印窗口
        }
        function showWInMessage() {
            //新开一个窗口，显示父窗口信息
        }
        function scrollWin(){
           //移动关于这个浏览器窗口到（0px,100px）
        }
    </script>
</head>
<body>
    <input type="button" value="打开一个新窗口" onclick="openWin()" />
    <br>
    <input type="button" value="移动这个新窗口" onclick="moveWin()" />
    <br>
    <input type="button" value="聚焦到新窗口" onclick="focusWin()" />
    <br>
    <input type="button" value="调整这个新窗口大小" onclick="resize()" />
    <br>
    <input type="button" value="关闭这个新窗口" onclick="closeWin()" />
    <br>
    <input type="button" value="打印本窗口" onclick="printWin()" />
    <br>
    <input type="button" value="关于这个浏览器窗口" onclick="showWInMessage()" />
    <br>
    <input type="button" value="滚动" onclick="scrollWin()" />

</body>
</html>

新建一个 step1.html，复制上述代码，分别实现 script 标签中的几个函数。

完成新打开一个窗口功能，请尝试在标签页打开，以及新开一个浏览器窗口打开两种方式，设置窗口外观宽度为 300 像素，高度为 300 像素
调整这个新开窗口宽度高度变为 600 像素
移动这个新开的窗口的位置到屏幕左上角位置为(300px,100px)
完成关闭新窗口功能，并且弹出确认框，完成一个逻辑判断，如果用户点击确认就关闭窗口，如果点击取消就不关闭
实现打印窗口效果
实现点击关于这个浏览器窗口按钮,新开一个窗口，设置窗口外观宽度为 300 像素，高度为 300 像素，并且在新窗口中显示这个浏览器相关信息如下
- 浏览器窗口宽度(不包含工具栏与滚动条)
- 浏览器窗口高度(包含工具栏与滚动条)
- 浏览器名称为
- 浏览器的完整高度，包含工具栏与滚动条
- 浏览器的完整宽度，包含工具栏与滚动条
- 浏览器窗口相对于计算机屏幕的 X 坐标
- 浏览器窗口相对于计算机屏幕的 Y 坐标
- 当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
- 当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
点击滚动按钮,滚动当前页面到(0px ,100px)

编码二

参考示例图 (opens new window)实现一个页面联动侧边导航，浏览器滚动，右侧的导航栏跟随滚动的页面而联动实现定位

当页面滑动到 red ，右侧导航栏相对应 red 一栏背景颜色改变为 #eee，字体颜色变为黑色
点击侧边导航栏也可以快速定位到响应页面

screen 对象

编码

基于上一个编码任务，给 HTML 添加一个按钮，点击实现显如下屏幕相关信息

计算机屏幕的尺寸
计算机屏幕的颜色深度
计算机屏幕的颜色分辨率（每象素的位数）
计算机屏幕的高度
计算机屏幕的宽度

效果如下所示

location 对象

JavaScript location 对象中包含了有关当前页面链接（URL）的信息，例如当前页面的完整 URL、端口号等，我们可以通过 window 对象中的 location 属性来获取。

编码

基于上一个编码任务，给 HTML 添加一个按钮，点击实现显如下当前页面链接（URL）相关信息

页面完整 href
页面路径
页面协议
页面哈希值,这里需要您对哈希字符串进行处理不要呆#
页面主机名和端口号

navigator 对象

Navigator 对象包含有关浏览器的信息

编码

基于上一个编码任务，给 HTML 添加一个按钮，点击实现显示当前浏览器相关信息

浏览器的内部名称（开发代号）
浏览器的官方名称：
浏览器的平台和版本信息
浏览器中是否启用 cookie 的布尔值
浏览器是否联网
浏览器的操作系统平台
浏览器的厂商和版本信息

效果如下所示

history 对象

编码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>second page</title>
  </head>
  <body>
    <h1>secong page</h1>
    <button onclick="myBack()">返回</button>
    <button onclick="myForward()">下一页</button>
    <button onclick="myGo()">去到第几条历史记录</button>
    <button onclick="myPushState()">插入一条新的历史记录</button>
    <button onclick="myReplaceState()">替换当前历史记录</button>
    <button onclick="historyInfo()">打印历史信息</button>
    <script type="text/javascript">
      function myBack() {
        //返回上一页
      }
      function myForward() {
        //去到下一页
      }
      function myGo() {
        //去到第几个历史记录页面
      }
      function myPushState() {
        //插入一条新的历史记录,位于第二页
      }
      function myReplaceState() {
        //替换当前历史记录
      }
      function historyInfo() {
        // 打印历史记录相关信息
      }
    </script>
  </body>
</html>

基于上一个编码任务,新建一个页面 step2.html，复制上述代码，分别实现 script 标签中的几个函数，具体实现如下功能
给 step1.html 添加按钮，点击跳转我们新建的 step2.html 页面
在 step2.html 页面中实现点击返回按钮，也页面就返回上一页
在 step2.html 页面中实现点击下一页按钮，也页面跳转到下一页
在 step2.html 页面中实现点击去到第几条历史记录按钮，弹出输入框，输入
在 step2.html 页面中实现点击插入一条新的历史记录按钮向浏览器的历史记录中插入一条新的历史记录
在 step2.html 页面中实现点击替换当前历史记录按钮使用指定的数据、名称和 URL 来替换当前历史记录。
在 step2.html 页面中实现点击打印历史信息按钮，显示浏览历史的数目,浏览器是否回滚过上一页或者下一页,浏览器没有调用过 pushState() 或 replaceState() 方法。

定时器

编码

<div id="fade-obj" style="width:300px;height:300px;background:#000"></div>
<button id="fade-btn">淡出</button>

针对以上 HTML ，分别使用 setTimeout 和 setInterval 实现以下功能：

点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为 0
在动画过程中，按钮的状态变为不可点击
在动画结束后，按钮状态恢复，且文字变成“淡入”
在按钮显示淡入的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明淡入动画结束后，按钮文字变为“淡出”
暂时不要使用 CSS animation（以后我们再学习）

编码二

1.点击更换背景按钮，每隔一秒后就给页面更换一个随机的背景颜色，点击停止按钮，页面就停止更换背景颜色效果如下所示

编码三

<!DOCTYPE html>
<html lang="en">
<head>
    <title>demo</title>
    <script type="text/javascript">
        function progressStart(){
            //模拟进度条
        }
    </script>
</head>
<body>
    <div id="progress">0%</div>
    <button id="btn" onclick="progressStart()">run</button>
<script>
</body>
</html>

复制上述代码，分别实现 script 标签中的函数，应用定时器模仿简单的进度条度效果，要求如下

在注释提示部分完成
点击 run 按钮，进度就开始跑，并且 id 名为progress的div内部文本也跟这进度条同步改变
分别使用 setInterval、setTimeout 和 requestAnimationFrame 三种方法进行实现体会它们之间的区别

效果如下

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-27 10:14
阅读 ( 415 )
分类：WEB前端开发