当前位置：网站首页>JS基础7

JS基础7

2022-04-22 12:23:00 【鹏程933】

BOM

定义：浏览器对象模型

操作浏览器的能力

打开关闭浏览器
操作历史记录
滚动条
弹框
地址栏

Windows对象

打开浏览器窗口自动创建Windows对象

属性

属性	含义
alert	弹出提示框
confirm	显示提示信息，确定，取消
prompt	显示让用户输入内容框
open	打开一个新的浏览器，指定URL
close	关闭浏览器

注：

open接受4个参数：要加载的URL，目标窗口，特性字符串，新窗口在浏览器的历史记录是否替代当前加载页的布尔值
alert,confirm,prompt的外观由浏览器决定，对话框显示时，代码会停止运行

计时器

setTimeout()倒计时计数器

setTimeout(function(){
    
alert('')
},1000)

setInterval()循环计时器

setInterval(function(){
    
alert('')
},1000)

clearTimeout()终止循环

视屏

innerHeight视屏高度
innerWidth视屏宽度
scrollTop距离视屏顶部距离
注：接受单位为PX
scrollLeft距离左边距离
moveTo(x,y)移动到指定位置
moveBy(x,y)移动到绝对坐标x,y
resizeTo()调整窗口到指定大小
resizeBy()调整指定大小

示例：过渡回到顶部

点击时获取当前高度
每100ms高度减100
赋值给scroollTop
scroollTop小于等于0停止计数

<style> div{
    height: 2000px;}
    button{
    
        position: fixed;
        right: 50px;
        bottom: 50px;
    }
</style> <body> <div></div> <button οnclick="differtop()">回顶部</button> <script> function differtop(){
    
   var windowheight=window.innerHeight;
   //获取当前视屏高度/* */
   var time=setInterval(function(){
    
    //循环计时器
    windowheight=windowheight-100;
   //每次视屏高度减100
                document.documentElement.scrollTop=windowheight; //视屏高度赋给距离顶部参数 if(document.documentElement.scrollTop<=0){
    
   //判断如果距离顶部小于0则停止循环计时器
        clearInterval(time)
            }
        },100)//100MS执行一次循环
  }
  </script>

history操作历史记录

back()加载history对象列表前一个URL
forward()加载history对象列表后一个URL
go()加载history对象列表具体某一个URL

location操作地址栏

属性	含义
href	当前加载页面的完整URL
hash	#号后面的值
host	服务器名和端口名
hostname	服务器名
pathname	URL中的路径和文件名
port	请求的端口
protococol	页面通用协议
search	URL查询的字符串
username	域名前指定的用户名
password	域名前指定的密码
origin	URL源地址（只读）

navigator对象

定义：navigator对象是客户端标识浏览器的标准，只要启用JS，navigator对象就一定存在
注：通常用于确定浏览器的类型
plugins数组确定浏览器是否安装了某个插件

属性	含义
name	插件名称
description	插件介绍
filename	插件的文件名
length	当前插件处理的MIME类型数量

<script> let hasPlugin=function(name){
    
            name=name.toLowerCase(); for(let plugin of window.navigator.plugins){
    
                if(plugin.name.toLocaleLowerCase().indexOf(name)>-1){
    
                    return true;
                }
            }
            return false
        }
        //检测Flash QuickTime
        alert(hasPlugin('Flash'))
        alert(hasPlugin('QuickTime'))
    </script>