9、BOM (浏览器对象模型)

1、认识BOM

js

三个部分:

1、ECMAScript标准 ECMA5 ECMA6

2、BOM Browser Object Model 浏览器对象模型

3、DOM 文档对象类型

window对象下的函数。

9、BOM (浏览器对象模型)

alert()

格式:window.alert(参数)

功能:弹出一个警告框,并显示,传入的内容

【注】所有window开头的函数,都可以省略window调用。

window.alert(123);

confirm

格式:window.confirm(参数)

功能:弹出一个带确定和取消的提示框

返回值:点击确定,返回true,点击取消,返回false

            /*var res = confirm("我美么?");
alert(res);*/
prompt

格式:window.prompt(参数)

参数:第一个参数,面板上显示的内容,第二个参数,输入框默认值

功能:这是一个带输入框的提示框

返回值:当点击确定,返回,输入的内容。当点击取消,返回null。

            /*var res = prompt("请输入一个数", 10)
console.log(res);*/

2、open与opener

window.open("https://www.baidu.com", "百度", "width=400,height=400,top=200,left=200");

三个参数

第一个参数:打开的网站的url

第二个参数:打开的新窗口起个名字(仅仅是起个名字,看不到这个名字)

第三个参数:一串特殊意义字符串。

opener

【注】打开当前窗口的父窗口

    <body>
<button onclick = "btnClick();">打开一个新窗口</button>
</body>
<script>
var i = 0;
function btnClick(){
/*
三个参数
第一个参数:打开的网站的url
第二个参数:打开的新窗口起个名字(仅仅是起个名字,看不到这个名字)
第三个参数:一串特殊意义字符串。
*/ window.open("https://www.baidu.com", "百度", "width=400,height=400,top=200,left=200"); /*while(i < 10){
var str = "width=400,height=400,top=" + (200 + 10 * i) + ",left=" + (200 + 10 * i);
window.open("https://www.baidu.com", "百度" + i, str);
i++;
}*/ }
</script>
父窗口:
    <style>
body{
background-color: yellow
}
</style>
</head>
<body>
<h1>这里是父窗口</h1>
<button onclick = "btnClick();">打开子窗口</button>
</body>
<script>
function btnClick(){
open("sub.html", "sub", "width=400,height=400,top=200,left=200");
}
</script>
子窗口
    <style>
body{
background-color: blue;
}
</style>
</head>
<body>
<h1>这里是子窗口</h1>
<button onclick = "btnClick();">按钮</button>
</body>
<script> /*
chome不支持
*/ function btnClick(){
// opener 打开当前窗口的父窗口的window对象
// alert(opener);
opener.document.write("我是子窗口");
}
</script>

3、history

window开头的属性也可以省略window

            /*alert(window.history);
alert(history);*/
history对象

属性:history.length 当前窗口历史记录中的条数

history.back() 返回上一条记录
history.forward() 前进到下一条记录
history.go();
				传参: 0  刷新
正数 前进该条数的记录
负数 返回该条数的记录
            // alert(history.length);

			function btnBack(){
history.forward();
}
function btnForWard(){
history.back();
}
function btnGo(){
history.go(-2);
}
</script>
</head>
<body>
<button onclick = "btnBack();">前进</button>
<button onclick = "btnForWard();">后退</button>
<button onclick = "btnGo();">GO</button>
</body>

4、location

// alert(window.location === window.document.location);

【注】上述,无论通过任何方式访问到location对象都是同一个。

location对象的属性

9、BOM (浏览器对象模型)

location 对象 窗口上的地址栏

url 统一资源定位符。 快递单

完整的url的格式:

https://www.baidu.com:8080/news?today=11&page=1#1

协议://主机名:端口号/路径?查询字符串#锚点

protocol 协议
		http://tianyufei.local/qwer/13location.html
*/ // alert(location.protocol);
hostname
                www.baidu.com    域名  是为了好记给IP起的别名
61.135.169.125 IP 全球范围内你使用的网络,唯一的标识。 port 端口号 当前电脑的软件在使用软件的时候,会随机分配一个端口号。
浏览器端口号:8080
FTP:2020 // alert(location.hostname); // alert(location.port); // alert(location.host);
IP:端口号
pathname 路径名
		// alert(location.pathname);
search 查询字符串
			?username=tian&password=123     

		// alert(location.search);
hash 锚点 #100
		alert(location.hash);

location 方法

    <head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function btnClick(){
// location.assign("https://www.baidu.com");
// location.replace("https://www.baidu.com");

可以传参,可以传true进行。

如果你传true,代表的是不经过缓存,直接从服务器重载。

                location.reload(true);
}

location.assign() 跳转

【注】在本窗口中加载页面,并且会产生历史记录。

location.replace() 替换

【注】在本窗口中加载页面,不会产生历史记录。

location.reload() 重载

        </script>
</head>
<body>
<button onclick = "btnClick();">百度</button>
</body>

5、延时器

var ID = setTimeout(函数名, 毫秒数)

参数:1、函数名

   2、毫秒数

返回值:该延时器的ID

【注】延迟对应毫秒数以后去执行一次函数,有且仅执行一次。

clearTimeout(ID)

功能:清除延时器。

    <head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/*
var ID = setTimeout(函数名, 毫秒数)
参数:1、函数名
2、毫秒数
返回值:该延时器的ID 【注】延迟对应毫秒数以后去执行一次函数,有且仅执行一次。 clearTimeout(ID)
功能:清除延时器。
*/
var ID = setTimeout(function(){
alert("五秒到了");
}, 5000); function btnClick(){
clearTimeout(ID);
}
</script>
</head>
<body>
<button onclick = "btnClick();">取消掉</button>
</body>

6、进度条

    <head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#progress{
width: 600px;
height: 35px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
#fill{
position: absolute;
width: 0px;
background-color: red;
height: 35px;
left: 0px;
top: 0px;
line-height: 35px;
}
#num{
position: absolute;
right: 0;
color: white;
font-size: 18px
}
</style>
</head>
<body>
<div id = "progress">
<div id = "fill" >
<span id = "num">0%</span>
</div>
</div>
</body>
<script>
var oProgress = document.getElementById("progress");
var oFill = document.getElementById("fill");
var oNum = document.getElementById("num");
var i = 0; //当前的宽
/*
人眼能识别的最小的间隔是18帧,电影院里面放的电影是24帧。
*/
var ID = setInterval(function(){
i = i + 5;
oFill.style.width = i + "px"; //修改百分比
oNum.innerHTML = parseInt((i / 600) * 100) + "%";
if(i == 600){
clearInterval(ID);
}
}, 30);
</script>
上一篇:【OpenCV】图像增强---灰度变换、直方图均衡化


下一篇:windows服务与自启动程序的区别(转载)