window对象的常见事件
窗口加载事件
也就是说，用addEventListener的方式，load事件可以注册多次的
DOMContentLoaded和onload的区别
窗口大小调整事件
这是以前的响应式布局的写法，现在不用啦，o(￣▽￣)ブ
定时器
setTimeout
window.setTimeout(调用函数，延迟的毫秒数)
window调用时可以省略
function callback(){
console.log('爆炸了')
}
var time1 = setTimeout(callback,3000)
var time2 = setTimeout(callback,5000)
//因为一个页面有多个定时器，所以要区分一下
window.clearTimeout(timeoutID)
这个timeoutID就是我们取的定时器的名字
setInterval
window.setInterval(回调函数，间隔的毫秒数)
重复调用一个函数，每隔这个时间，就去调用一次回调函数
秒杀活动倒计时
<div class="a" style="width: 100px;height: 100px;background-color: black;color: white; display: inline-block;">
</div>
<div class="b" style="width: 100px;height: 100px;background-color: black;color: white; display: inline-block;">
</div>
<div class="c" style="width: 100px;height: 100px;background-color: black;color: white; display: inline-block;">
</div>
<script>
// 倒计时效果
var hours = document.querySelector('.a');
var mins = document.querySelector('.b');
var seconds = document.querySelector('.c');
function countDown(time) {
var ans = []
// 现在的时间
var dateNow = +new Date();
// 活动截止时间
var dateDeadline = +new Date(time);
// 转换为s
var times = (dateDeadline - dateNow) / 1000;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
ans[0] = h;
var min = parseInt(times / 60 % 60);
min = min < 10 ? '0' + min : min;
ans[1] = min;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
ans[2] = s;
return ans
}
console.log(countDown)
countDown('2021-6-9 22:00:00');//先调用一次这个函数，防止第一次刷新页面有空白
setInterval(function () {
var time = countDown('2021-6-9 22:00:00');
hours.innerHTML = time[0];
mins.innerHTML = time[1];
seconds.innerHTML = time[2];
}, 1000);
</script>
区别：location.assign()可以后退；location.replace()不记录历史，不可以后退
window.clearInterval(intervalID);
验证码发送倒计时
<!-- 发送短信案例 -->
<input type="text"> <button>发送</button>
<script>
var btn = document.querySelector('button');
var time = 5; //定义剩下的秒数
btn.addEventListener('click', function () {
var timer = setInterval(function () {
btn.innerHTML = '还剩' + time + '秒可以点击';
time--;
btn.disabled = true;
if (time == 0) {
btn.disabled = false
btn.innerHTML = '发送'
clearInterval(timer);//清除定时器
time = 5;//下次还是5s开始倒计时
}
}, 1000)
})
</script>
this指向问题
1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window(不论定时器的位置在哪，都是指向window)）
console.log(this);
function fn(){
console.log(this)
}
window.fn();//fn的调用其实是省略了window.所以这里的this也是指向window的
2. 方法调用中谁调用this指向谁
var o = {
sayHi:function(){
console.log(this);// this指向的是o这个对象
}
}
o.sayHi();
var btn = document.querySelector('button');
btn.onclick = function(){
console.log(this); // this指向的是btn这个按钮对象
}
3. 构造函数中的this指向构造函数的实例
function Fun(){
console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();
Location对象
window对象提供的一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。返回的是一个对象
利用location获取url中的参数
//login.html
<body>
<p>登录页面</p>
<form action="index.html">
<span>用户名：</span><input type="text" name="uname">
<input type="submit" value="登录">
</form>
</body>
//index.html
<body>
<p>首页</p>
<span></span>欢迎光临
</body>
<script>
var uname = location.search;
var index = uname.indexOf('=');
var uName = document.querySelector('span');
uName.innerHTML = uname.substr(index + 1)
</script>
navigator 对象
包含浏览器的相关信息
history 对象
网页特效
offset
- offsetWidth——可以帮我们动态的获得element的宽度，比如你页面缩放时，element的宽度会变，用这个可以随时获取
offset和style的区别
作用： offset只读
style读写，style的写，是向元素里增加行内样式，所以级别高
拖拽案例
<script>
var login = document.querySelector('#login');
//点击对话框
var p = document.querySelector('p');
p.onclick = function () {
login.style.display = 'block'
}
var clo = document.querySelector('.close')
clo.addEventListener('click', function () {
login.style.display = 'none'
})
//拖拽行为
login.addEventListener('mousedown', function (e) {
//鼠标距离盒子边缘的xy
var rel_x = e.pageX - login.offsetLeft;
var rel_y = e.pageY - login.offsetTop;
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - rel_x + 'px';
login.style.top = e.pageY - rel_y + 'px';
}
//鼠标弹起
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
})
})
</script>
京东放大镜案例
- 子绝父相的时候，子盒子是相对父盒子发生位移，所以是将鼠标在父盒子内距离盒子边缘的距离，赋值给遮盖层
- 放大镜的那个图片也要有定位
- 放大的图片的最后一步是取负值加‘px’
- 效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.small {
position: relative;
}
.small>img {
width: 250px;
height: 250px;
border: 1px solid black
}
.small .mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: rgba(255, 235, 163, .5);
cursor: move;
}
.small .big {
width: 400px;
height: 400px;
border: 1px solid black;
position: absolute;
top: 0;
left: 300px;
display: none;
overflow: hidden;
}
.small .big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="small">
<img src="../1.jpg">
<div class="mask"></div>
<div class="big"><img class="bigImg" src="../1.jpg"></div>
</div>
<script>
var mask = document.querySelector('.mask');
var small = document.querySelector('.small');
var big = document.querySelector('.big');
small.addEventListener('mouseover', function () {
big.style.display = 'block'
mask.style.display = 'block'
})
small.addEventListener('mouseout', function () {
big.style.display = 'none';
mask.style.display = 'none'
})
small.addEventListener('mousemove', function (e) {
//把鼠标在盒子内的坐标赋值给遮挡层，因为子绝父相，是相对于父元素的偏移量
//1. e.pageY - this.offsetTop 得到鼠标相对父盒子边缘的距离
//2. - mask.offsetHeight / 2; 为了让鼠标在遮盖层中间
var y = e.pageY - this.offsetTop - mask.offsetHeight / 2;
var x = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
//3. 遮盖层可以移动的最大距离
var maxX = this.offsetWidth - mask.offsetWidth;
var maxY = this.offsetHeight - mask.offsetHeight;
if (x < 0) {
x = 0;
} else if (x > maxX) {
x = maxX;
} else {
x = x;
}
if (y < 0) {
y = 0;
} else if (y > maxY) {
y = maxY;
} else {
y = y;
}
mask.style.top = y + 'px';
mask.style.left = x + 'px';
//4.大盒子放大镜效果
var bigImg = document.querySelector('.bigImg');
// 遮挡层移动距离/遮挡层最大移动距离 = 大图片移动距离/大图片最大移动距离
// 大图片最大移动距离
var maxX_big = bigImg.offsetWidth - big.offsetWidth;
var maxY_big = bigImg.offsetHeight - big.offsetHeight;
var x_big = maxX_big * x / maxX;
var y_big = maxY_big * y / maxY;
bigImg.style.left = -x_big + 'px';
bigImg.style.top = -y_big + 'px';
})
</script>
</body>
</html>
client系列
clientWidth:不包含边框
offsetWidth:包含边框
scroll系列
scrollHeight----全部的高度
如果是元素往上卷，就是element.scrollTop
如果是整个页面往上卷，就是window.pageYOffset
三大系列的区别
动画原理（~321P）
动画函数简单封装
先清除定时器，再开启，避免不停的按按钮，定时器积累越来越多（类似防抖？）
非匀速动画（逐渐缓慢）
往前移：step是正值，往大了取；往后退：step是负值，往小了取
动画添加回调函数
<body>
<div class="move" style="width: 100px;
height: 100px;
background-color:pink;
position: absolute;
top:50px;
left: 0;">
</div>
<button>移动</button>
<script>
var move = document.querySelector('.move');
var button = document.querySelector('button');
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
console.log(obj.offsetLeft)
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
if (callback) {
// 调用函数
console.log(callback)
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 50);
}
button.addEventListener('click', function () {
animate(move, 400, function () {
move.style.border = '5px solid green';
move.style.backgroundColor = 'white';
});
})
</script>
sessionStorage和localStorage
sessionStorage
localStorage
记住用户名案例
<body>
<input type="text"><input class="check" type="checkbox">记住用户名
<script>
var ipt = document.querySelector('input');
var check = document.querySelector('.check');
if (localStorage.getItem('uname')) {
ipt.value = localStorage.getItem('uname')
check.checked = true;
}
check.addEventListener('change', function () {
if (this.checked) {
var val = ipt.value
localStorage.setItem('uname', val)
} else {
localStorage.removeItem('uname')
}
})
</script>
</body>
备注
- BOM缺乏标准，JS语法标准化组织是ECMS，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分
- DOM的顶级对象是document，BOM的顶级对象是window
- BOM包含DOM
- window,name是空，但是浏览器里有这个name的，所以自定义变量的时候，不要用name来作为变量名
- 回调函数：上一件事干完，再回头调用这个函数
- 类名不能为1，2，3这种
- son.parentNode(返回最近一级的父亲，不管父亲有没有定位)；son.offsetParent(返回的是带定位的父亲)
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
-
dpr 物理像素比（devicePixelRatio）
-
pageshow页面重新加载时会触发的事件，无论页面是否来自缓存
扫一扫
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
