BOM的概念
- 浏览器对象模型，提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的底层对象，其他对象都是这个对象的子对象
- 我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等。
window对象
- 浏览器的顶级对象，当调用window下的属性和方法时，可以省略window
- 注意：window下两个特殊的属性window.name、window.top
top
name
声明全局变量的时候不推荐使用这两个属性，函数作用域内可以使用
// window对象在调用属性和方法时，可以省略window不写
// alert(1)
// window.alert(2);
// 在全局作用域定义的全局变量，都是window的一个属性
var age = 18;
console.log(window.age);
// window中的特殊属性name，如果去定义新的变量，只会在原来的name属性上进行赋值，并且只能是字符串格式的值
var name = 123;
console.log(window.name);
// 特殊属性二：top属性，属性值指向的是顶层对象window，只读属性，不可更改
var top = 23;
console.dir(window.top);
对话框
- alert()警示框（工作中并不是经常用到）
- prompt()提示框
- confirm()对话框
confirm方法有返回值，根据选择情况返回true或者false
// 警示框
btn1.onclick = function(){
alert("hello");
};
// 提示框
btn2.onclick = function(){
var num = prompt("请输入",12);
console.log(num);
}
// 让用户进行确认或者取消选中的对话框
// confirm方法有返回值，根据按钮点击情况，如果点击确定，返回true，如果点击取消，返回false
btn3.onclick = function(){
var isSure = confirm("确定吗？");
console.log(isSure);
};
加载时间
onload事件
- 我们可以给 window 对象或者 <img> 等元素添加 onload 加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数。
- 其中 window 对象加载完毕：指的是所有HTML结构加载完，并且外部引入资源（js、css、img、视频）也加载完毕。
onload事件应用
- 利用window.onload事件，可以将js代码提前到html结构之前
-
注意：一个页面中只能有一个window.onload事件
获取一个盒子内部的图片高度
js代码提前到html结构之前
延时器
- 类似于定时炸弹，是window对象的一个方法
- 语法：window.setTimeout(func,time);
- 第一个参数：延迟执行的函数，可以是函数匿名定义，或者是一个函数名的引用，不要给函数加()
- 第二个参数：延迟的时间，毫秒计数，1000ms=1s
- 功能：在指定的时间后，延迟执行一个函数
清除延时器
- window对象的一个方法
- 语法：window.clearTimeout(timeout);
- 参数：指定的延时器变量名的引用
- 功能：清除指定的延时器
- 注意：清除的延时器需要存储到一个变量中，便于后期清除调用
延时器的使用与清除代码：
<script>
// 延时器
// 异步语句
// 延时器为了保证后期能够被清除，需要定义赋值给一个变量
var timeout = window.setTimeout(function () {
console.log("boom");
},2000);
// 同步语句
console.log(1);
console.log(2);
console.log(3);
console.log(4);
// 清除延时器
window.clearTimeout(timeout);
</script>
利用延时器的函数节流器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="btn" value="点击按钮">
<script>
// 点击输出 随机数
var btn = document.getElementById("btn");
// 绑定事件
// 函数节流操作
// 定义一个开关，给函数上一把锁，true 表示锁住状态，不能执行后面的代码，false 表示打开状态，可以执行后面的代码
// 初始状态锁是打开的
var lock = false;
btn.onclick = function () {
// 函数内部需要判断，是否在指定的时间之外触发事件
// 如果锁是打开的，可以往后执行，
// 如果锁是锁住的，不能执行后面的代码
if (lock) {
return;
}
console.log(Math.random());
// 执行完毕后，锁应该被锁住
lock = true;
// 隔 2秒 后，锁再次打开
setTimeout(function (){
lock = false;
},2000);
};
</script>
</body>
</html>
定时器
- window对象的一个方法，相当于定时闹钟，每隔固定的时间响一次
- 语法：window.setInterval(function,interval);
- 第一个参数：每次执行的函数，可以是匿名函数，或者是一个函数的引用，引用时不要加()
- 第二个参数：时间间隔，以毫秒计数
- 功能：每隔一段时间，周期性的执行一个函数
第一次执行函数时是在定义的时间间隔之后
清除定时器
- window对象的一个方法
- 语法：window.clearInterval(timer);
- 参数：指定的定时器变量名引用
- 功能：清除指定的定时器
- 注意：需要将要清除的定时器存储到一个变量中，方便后期清除调用
简单运动
- 简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个运动的效果，人眼的视觉残留的时间 0.1-0.4 秒之间。
- 制作原理：定时器，实现每隔一个极短的时间（50-100ms），执行函数，函数内部让运动的属性值发生变化
提高运动速度的方法
- 缩短时间间隔，增加每秒移动的次数
- 加大步长
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
// 简单运动
// 获取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
// 点击开始按钮，让box向右运动
// 定义一个全局变量存储left的属性值，每次都会发生变化
// 信号量，初始值必须与属性初始值保持一致
var nowLeft = 0;
// 定时器，制作运动过程
start.onclick = function(){
setInterval(function(){
// 需要信号量进行自加
nowLeft += 5;
// 将最新的值赋值到css属性
box.style.left = nowLeft+"px";
},100);
};
</script>
</body>
清除定时器遇到的问题
问题1
- 将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击的情况
1.多次点击开始会造成加速
多开定时器会导致叠加过多
2.多次点击开始不能再停止
清除定时器只能清除变量存储的最新的一个定时器
解决办法
- 设表先关
-
每次开启新定时器之前，先清除一次前面的定时器
先清除，再启动
问题2
- 要求元素走到指定位置停止，比如让元素停止在500px的位置
- 步长设置的不合理，停止的位置可能不是正好在500px的位置处（比如设置35px自增步长，最后停在525px）
解决方法
- 拉终停表
- 在定时器内部每次都要判断是否走到了终点，要不要停止定时器
-
如果走到了或者超过了终点，强行拉到终点，然后结束定时器
强制拉到500px
问题3
- 需求：在规定时间内，让元素走到规定的结束位置，时间间隔可以更改
- 比如：让元素在2秒内，从0走到500px
解决办法
- 步标整除
- 总距离 = 步长 * 次数；
- 时间间隔自定义，总时长固定
- 求出总次数 = 总时间 / 时间间隔
-
定义计数器变量，每执行一次定时器函数增加计数1，直到执行达到总次数，停止定时器
布标整除
封装动画函数
- 多属性动画
-
获取计算后样式的方法
window.getComputedStyle()；
// 多属性运动
// 共同点：总时间、时间间隔是相同的，自定义
// 不同的：起始位置（通过程序方法自动获取当前页面最终显示效果）和结束位置（自定义指定的）
// 函数参数
// 参数1：元素对象，它要进行运动
// 参数2：结束位置，以对象数据方式传递
// 参数3：总时间
// 自定义动画函数
function animate(ele,end,time) {
// 已知结束位置，总时间，时间间隔 50，缺少起始位置
// 起始位置要根据结束位置提供的属性进行获取
// 起始位置的对象，需要先定义一个空对象
var now = {};
// start.left = 100;
// end 对象遍历，获取属性名
for (var k in end) {
now[k] = parseFloat(window.getComputedStyle(ele)[k]);
}
// console.log(start);
// 自定义时间间隔
var interval = 50;
// 计算总次数
var maxCount = time / interval;
// 次数累加器
var count = 0;
// 对象中的每个属性都有自己的步长，也可以放到一个步长对象中
var step = {};
// 遍历结束对象，计算每个属性的步长
for (var k in end) {
step[k] = (end[k] - now[k]) / maxCount;
}
// console.log(step);
// ====================准备工作结束，开启定时器=========================
var timer;
timer = setInterval(function () {
// 让每个属性发生变化，赋值给 now 对象中的每一项
for (var k in end) {
now[k] += step[k];
}
// 累计运动次数
count++;
// 判断定时器是否结束
if (count >= maxCount) {
// 拉终停表
for (var k in end) {
now[k] = end[k];
}
clearInterval(timer);
}
// 赋值给对应元素对象属性
for (var k in now) {
// 判断如果是 不透明度属性，不要加px单位
if (k === "opacity") {
ele.style[k] = now[k];
} else {
ele.style[k] = now[k] + "px";
}
}
},interval);
}
调用
页面特效
无缝滚动轮播图
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.scroll {
position: relative;
width: 830px;
height: 130px;
border: 10px solid #000;
margin: 100px auto;
overflow: hidden;
}
.scroll .inner {
position: relative;
width: 5000px;
}
.scroll ul {
position: absolute;
top: 0;
left: 0;
height: 130px;
list-style: none;
}
.scroll ul li {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="inner">
<ul id="munit">
<li><img src="images/shuzi/0.png" alt="" /></li>
<li><img src="images/shuzi/1.png" alt="" /></li>
<li><img src="images/shuzi/2.png" alt="" /></li>
<li><img src="images/shuzi/3.png" alt="" /></li>
<li><img src="images/shuzi/4.png" alt="" /></li>
<li><img src="images/shuzi/5.png" alt="" /></li>
<li><img src="images/shuzi/6.png" alt="" /></li>
</ul>
</div>
</div>
<script src="common.js"></script>
<script>
// 获取元素
var scroll = my$("scroll");
var munit = my$("munit");
// 2.折返点计算需要通过 js 自动计算
var back = -munit.offsetWidth;
console.log(back);
// 1.自动生成另一组对应的图片结构 li
munit.innerHTML = munit.innerHTML + munit.innerHTML;
// 自己进行滚动播放
var nowLeft = 0;
var timer;
timer = setInterval(run,5);
// 3.鼠标移上 scroll 元素，让运动停止
scroll.onmouseover = function () {
clearInterval(timer);
};
// 4.鼠标离开 scroll 元素，让运动重新开始
scroll.onmouseout = function () {
timer = setInterval(run,5);
};
// 运动函数
function run() {
// nowLeft 进行自减
nowLeft -= 1;
// 每次都要判断，是否走到了折返点，如果走到了，让他瞬间切换到 0
if (nowLeft <= back) {
nowLeft = 0;
}
// 给ul 赋值
munit.style.left = nowLeft + "px";
}
</script>
</body>
</html>
完整切换效果的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.carousel{
position: relative;
width: 880px;
height: 550px;
border: 1px solid #333;
margin: 50px auto;
}
.pic li{
position: absolute;
left: 0;
top: 0;
width: 880px;
height: 550px;
display: none;
}
.pic li.current{
display: block;
}
.btn a{
position: absolute;
top: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
background-color: rgba(255,255,255,0.3);
text-decoration: none;
color: #444;
text-align: center;
line-height: 80px;
font-size: 60px;
font-family: "SimSun";
}
.btn .left{
left: 10px;
}
.btn .right{
right: 10px;
}
.btn a:hover{
background-color: rgba(255,255,255,0.7);
}
.sub{
position: absolute;
bottom: 30px;
left: 50%;
width: 200px;
height: 40px;
margin-left: -100px;
border-radius: 20px;
background-color: rgba(255,255,255,0.3);
}
.sub li{
float: left;
width: 20px;
height: 20px;
margin: 10px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.sub li.current{
background-color: #0ff;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="pic" id="pic">
<li class="current"><img src="images/lunbo/01.jpg" alt=""></li>
<li><img src="images/lunbo/02.jpg" alt=""></li>
<li><img src="images/lunbo/03.jpg" alt=""></li>
<li><img src="images/lunbo/04.jpg" alt=""></li>
<li><img src="images/lunbo/05.jpg" alt=""></li>
</ul>
<div class="btn" id="btn">
<a href="javascript:;" class="left" id="leftbtn"><</a>
<a href="javascript:;" class="right" id="rightbtn">></a>
</div>
<ol class="sub" id="sub">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script src="common.js"></script>
<script>
// 编程思路：信号量编程，通过一个全局变量的信号量，在不同的事件函数中进行信息传递，让多个事件进行协同作业
// 1.获取元素
var carousel = my$("carousel");
var ul = my$("pic");
var ulLis = ul.children;
var leftbtn = my$("leftbtn");
var rightbtn = my$("rightbtn");
var ol = my$("sub");
var olLis = ol.children;
// 全局信号量，存储的是要展示的图片在li的下标
var index = 0;
// 2.右按钮事件,切换下一张
rightbtn.onclick = rightHandle;
// 3.左按钮事件,切换上一张
leftbtn.onclick = function(){
// 自减
index--
// 判断index是否是超过最小的下标了，是的话，相当于从第一张切换到最后一张
if(index < 0){
index = ulLis.length - 1;
}
change();
};
// 4.下标小圆点事件,点哪个小圆点,对应展示图片
// 批量添加事件
for(var i = 0;i < olLis.length;i++){
// 存贮自己的下标
olLis[i].index = i;
// 给每个小圆点添加点击事件，获取对应下标，赋值给信号量
olLis[i].onclick = function(){
// 获取当前点击的元素的下标
index = this.index;
change();
};
}
// 5.轮播图自动播放效果,执行类似右按钮的事件
var timer = setInterval(rightHandle,3000)
// 6.鼠标移上停止自动轮播
carousel.onmouseover = function() {
clearInterval(timer);
}
// 7.鼠标移开轮播图,重新开始轮播
carousel.onmouseout = function() {
timer = setInterval(rightHandle,3000);
}
// 定义切换函数
function change() {
// 排他思想
// 对应控制
// 让所有的li标签清除类名
for(var i = 0;i < ulLis.length; i++){
ulLis[i].className = "";
olLis[i].className = "";
}
// 保留自己
olLis[index].className = "current";
ulLis[index].className = "current";
};
// 定义右按钮事件函数
function rightHandle() {
// 信号量自加
index++;
// 判断index是否是超过最大的下标了，是的话，相当于从最后一张切换到第一张
if(index > ulLis.length - 1){
index = 0;
}
change();
};
</script>
</body>
</html>
返回顶部特效
案例链接，有需要的自取
https://gitee.com/amanohina/home-week-1/blob/master/backtop.rar
location对象
- window对象的一个属性，使用时可以省略window对象
- 可以获取或者设置浏览器地址栏的url地址
- 输出url地址
console.log(location.href)
- 重新赋值
// 重新赋值，可以跳转到页面，并且记录历史
location.href = "http://www.baidu.com/";
- assign()
// 作用与href属性一样，可以设置页面跳转的地址
location.assign("http://www.baidu.com/");
-reload()
// reload重新加载
// 类似键盘中的f5功能,类似于false的效果，ctrl+f5强制刷新，相当于true的效果
// 参数：true 强制从服务器获取页面，false 如果浏览器有缓存过网页，会直接从缓存中获取页面
location.reload();
URL了解
- 统一资源定位符 (Uniform Resource Locator, URL)
- URL的组成：scheme://host:port/path?query#fragment
- scheme：通信协议，常见的有http，ftp，maito
- host：主机，服务器域名系统，主机名或者IP地址
- port：端口号，整数，可选
- path：路径
- query：查询，可选，用于给动态网页传递参数，可以有多个参数
- fragment：信息判断，字符串，锚点
history对象
- history 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象
- history 对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存。
- back()
// 回退历史记录访问
history.back();
- forward()
// 前进，查看之前记录的跳转后的页面
history.forward();
- go()
参数数字1是往前进一个页面，-1往后退一个页面
网友评论