008 BOM
一：说明
1.说明
浏览器对象模型
2.顶级对象
浏览器中的顶级对象是window
页面中的顶级对象是document
因此：
变量属于window的，函数也是window的。
就可以使用window.变量，window.函数。
3.window的另一个名字
top=window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var name="tom";
console.log(top.name);
</script>
</body>
</html>
4.系统的对话框
都不建议使用，一是外表都不同，影响加载。
window.alert("mnmnmn")
window.prompt("输入:");
var result = window.confirm(); true或者false是返回值
二：加载事件
1.页面加载完成之后触发的事件
window.onload=function () {
}
2.扩展事件
事件关闭之前触发：onbeforeunload
页面关闭后才触发：onunload
三：Location对象
1.说明
是地址栏
可以设置和获取URL
2.程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log(window.location);
</script>
</body>
</html>
效果：
3.示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="显示" id="btn">
<script>
console.log(window.location.hash); //#，以及之后的内容
console.log(window.location.host); //主机名及端口号
console.log(window.location.hostname);
console.log(window.location.pathname);
console.log(window.location.port);
console.log(window.location.protocol);
console.log(window.location.search); //搜索的内容 onload=function () {
document.getElementById("btn").onclick=function () {
location.href="https://www.baidu.com"; //属性：设置跳转的地址，有后退
location.assign("https://www.baidu.com"); //方法，与上面的相同，有后退
location.reload(); //刷新
location.replace("https://www.baidu.com"); //没有后退，因为没有历史记录
}
}
</script>
</body>
</html>
四：history
1.程序
forward
back
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="跳转" id="btn">
<input type="button" value="前进" id="come">
<script>
document.getElementById("btn").onclick=function () {
window.location.href="demo20.html";
}
document.getElementById("come").onclick=function () {
window.history.forward();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="后退" id="back">
<script>
document.getElementById("back").onclick=function () {
window.history.back();
}
</script>
</body>
</html>
五：navigator
1.说明
主要是两个方法
2.程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//
console.log(window.navigator.userAgent); //知道浏览器所在的系统平台类型
console.log(window.navigator.platform);
</script>
</body>
</html>
效果：
六：定时器
1.说明
在BOM中有两个定时器
window.setInterval()
参数1：函数
参数2：时间，毫秒，页面加载完成后，过了多久，开始执行函数。
2.程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="停止" id="btn">
<script>
//循环弹出
var timeId = window.setInterval(function () {
alert("-====")
},2000);
//清除定时器,将上面的id清除
document.getElementById("btn").onclick=function () {
window.clearInterval(timeId);
}
</script>
</body>
</html>
效果：
3.摇起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
height: 200px;
}
div {
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="动起来" id="btn">
<input type="button" value="停止" id="stop">
<div id="di">
<img src="data:image/00_1.png" alt="">
<img src="data:image/00_3.jpg" alt="">
</div>
<script>
var timeId = null;
document.getElementById("btn").onclick=function () {
timeId = window.setInterval(function () {
var x = parseInt(Math.random()*100+1);
var y = parseInt(Math.random()*100+1);
document.getElementById("di").style.left=x+"px";
document.getElementById("di").style.top=y+"px";
},10);
}
document.getElementById("btn").onclick=function (){
window.clearInterval(timeId);
}
</script>
</body>
</html>
4.图片时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="" alt="" id="img">
<script>
//先执行一次
function f1(){
var dt = new Date();
var hour = dt.getHours();
var second = dt.getSeconds();
hour = hour<10 ? "0"+hour : hour;
second = second<10 ? "0"+second : second;
//赋值
document.getElementById("img").src="meimei/"+hour+"_"+second+".jpg";
}
//然后定时器
window.setInterval(f1,1000);
</script>
</body>
</html>
效果：
5.第二个定时器
一次性的定时器，执行完就不再执行了。
参数1：函数
参数2：时间，毫秒
返回定时器的id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var timeId = window.setTimeout(function () {
alert("==")
},1000);
window.clearTimeout(timeId);
</script>
</body>
</html>
在上面要执行setInterval，虽然是一次性的定时器，但是还在内存中，需要清理，所以要再执行。
不过这个需要手动执行，这样是不会起到清理的作用。
6.协议按钮禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10">
请阅读协议
</textarea>
<input type="button" value="请阅读(6)" id="btn" disabled="disabled"> <!-- 倒计时-->
<script>
var time = 5;
var timeid=window.setInterval(function () {
time--;
if(time<=0){
clearInterval(timeid);
document.getElementById("btn").value="同意";
document.getElementById("btn").disabled=false;
}
document.getElementById("btn").value="请阅读("+time+")";
},1000);
</script>
</body>
</html>
效果：
7.div渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 200px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="div"></div>
<br>
<input type="button" value="渐变" id="btn">
<script>
//透明化
var opacity = 10;
document.getElementById("btn").onclick=function () {
var timeId=window.setInterval(function () {
opacity--;
if(opacity<=0){
window.clearInterval(timeId);
}
document.getElementById("div").style.opacity=opacity/10;
},100)
}
</script>
</body>
</html>
七：动画
1.封装动画函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
/*脱离文档流*/
position: absolute;
}
input {
margin-top: 20px;
}
</style> </head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script> //设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 20);
} document.getElementById("btn1").onclick = function () {
animate(document.getElementById("dv"), 400);
};
//点击第二个按钮移动到800px document.getElementById("btn2").onclick = function () {
animate(document.getElementById("dv"), 800);
}; </script>
</body>
</html>
2.效果
008 BOM的更多相关文章
- 前端之BOM与DOM-JQuery
一.前端基础之BOM和DOM: 1: JavaScript分为 ECMAScript,DOM,BOM BOM:指的是浏览器对象模型,它使JavaScript有能力与浏览器进行“对话” DOM:是指文档 ...
- HTML BOM Browser对象
BOM:Browser Object Model,即浏览器对象模型,提供了独立于内容的.可以与浏览器窗口进行互动的对象结构. Browser对象:指BOM提供的多个对象,包括:Window.Navig ...
- 一步步学习javascript基础篇（7）：BOM和DOM
一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...
- BOM，DOM，ECMAScripts三者的关系
一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁. DOM下,HTM ...
- javascript学习之BOM
BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. ...
- BOM以及定时器
一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...
- js浏览器对象模型（BOM）
浏览器对象模型(Browser Object Model,BOM):浏览器为js提供的对象集合. 1 windows对象 windows对象:表示浏览器的框架以及与其相关的内容,比如滚动条和导航栏图标 ...
- BOM操作
BOM操作 //浏览器对象模型 opener=window.open(页面的url,打开方式) opener.document.body.style.background="red" ...
- 什么是BOM头，BOM头有什么影响，怎么去掉BOM头
什么是bom头? 在utf-8编码文件中BOM在文件头部,占用三个字节,用来标示该文件属于utf-8编码,现在已经有很多软件识别bom头,但是还有些不能识别bom头,比如PHP就不能识别bom头,这也 ...
随机推荐
- 迷你商城后台管理系统————stage3项目部署测试汇总
系统测试 在项目部署到云服务器之前,已通过本机启动springboot程序,访问localhost:8080,输入登陆的账户等一系列操作测试:功能测试.健壮性测试,系统已满足用户规定的需求. 系统部署 ...
- mysql 用户创建，授权
关于mysql的用户管理,笔记 1.创建新用户 通过root用户登录之后创建 >> grant all privileges on *.* to testuser@localhost id ...
- 个性化排序算法实践(二)——FFM算法
场感知分解机(Field-aware Factorization Machine ,简称FFM)在FM的基础上进一步改进,在模型中引入类别的概念,即field.将同一个field的特征单独进行one- ...
- P1052 过河[DP]
题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...
- 0023SpringMVC自定义类型转换器
页面录入的字符串:2019/12/05可以映射到实体的日期属性上,但是如果是录入2019-12-05就会报错400 bad request,想要以2019-12-05日期格式的方式映射到实体的日期属性 ...
- keras模块学习之泛型模型学习笔记
本笔记由博客园-圆柱模板 博主整理笔记发布,转载需注明,谢谢合作! Keras泛型模型接口是: 用户定义多输出模型.非循环有向模型或具有共享层的模型等复杂模型的途径 适用于实现:全连接网络和多输入 ...
- 学习Kubernetes，这些负载均衡知识点得知道!
负载均衡 负载均衡是高可用架构的一个关键组件,主要用来提高性能和可用性,通过负载均衡将流量分发到多个服务器,同时多服务器能够消除这部分的单点故障. 一个没有使用负载均衡的Web架构一般会长得像这样: ...
- java spring boot 导出/下载文本文件操作（包含写文本文件）
内容简介 本文主要内容为使用java把内容写入文本文件,并实现下载/导出的功能. 实现步骤 1. controller层 @ResponseBody @RequestMapping(value = & ...
- vue路由监听及路由守卫
路由监听: //当一个组件被复用的时候,那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, ...
- CF696B Puzzles 概率期望
有一棵树,共有 $N$ 个节点,他会使用下列 $DFS$ 算法对该树进行遍历: starting_time是一个容量为n的数组current_time = 0dfs(v): current_time ...