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头,这也 ...
随机推荐
- Linux命令——sync
参考:A Step-By-Step Guide to Using the Linux sync Command 前言 数据只有被读入内存才能被CPU所处理,但是数据又常常需要由内存写回磁盘当中(例如储 ...
- 手写热更新阐述tinker实现原理
关于热更新如今面试也是基本上都会提及到的,我上一家公司用的是tinker,而这里准备研究的也是它的原理,而关于tinker的原理网上也是一大堆文章进行介绍,为了对它有个更加进一步的认识,所以自己动手来 ...
- test20190504 行走
行走(walk.cpp/c/pas) 题目描述 "我有个愿望,我希望走到你身边." 这是个奇异的世界,世界上的 n-1 条路联结起来形成一棵树,每条路有一个对应的权值 ci. 现在 ...
- Tensorflow细节-P194-组合训练数据
import tensorflow as tf files = tf.train.match_filenames_once("data.tfrecords-*") filename ...
- shiro认证+盐加密
Shiro认证 导入pom依赖 <shiro.version>1.2.5</shiro.version> <!--shiro--> <dependency&g ...
- SpringBoot第一次案例(以及jar包的生成)
一.Springboot简介 Springboot框架就用于简化Spring应用的开发,约定大于配置,去繁从简.从以往的“Spring全家桶时代”正式过渡到”Spring boot,J2EE一站式解决 ...
- bzoj 5299: [Cqoi2018]解锁屏幕 状压dp+二进制
比较简单的状压 dp,令 $f[S][i]$ 表示已经经过的点集为 $S$,且最后一个访问的位置为 $i$ 的方案数. 然后随便转移一下就可以了,可以用 $lowbit$ 来优化一下枚举. code: ...
- 洛谷 P3979 遥远的国度
题目描述 修改某条路径上的值以及询问子树的最小值都最树剖的基础操作,那么如何实现换根呢? 考虑一下三种情况: 1.rot=询问的子树x,答案就是整棵树的最小值 2.rot在x的子树里,只有rot到x这 ...
- 洛谷P1162（自我感觉思路还算巧妙的一道题）
P1162 填涂颜色 题目描述 由数字0 组成的方阵中,有一任意形状闭合圈,闭合圈由数字1构成,围圈时只走上下左右4个方向.现要求把闭合圈内的所有空间都填写成2.例如:6X6的方阵(n=6),涂色前和 ...
- shell history 命令
1.history命令可以显示历史执行过的命令: 2.使用!+序号执行该序号对应的命令: 例子 $ history sed 's/haha/hello/g' test cat test cat tes ...