【今日文章】：Web浏览器的部分事件
visibilitychange
visibilitychange：就是为了让我们监听【页面切换】的。
常见的应用场景：当页面【切换】的时候，浏览器为了保证自己的效率，会将【定时器】设置成1秒走一次。
<body>
<script>
// 功能很简单，就是每隔20s，n++;
function count(){
// 1.定义一个数
let n = 0;
const timer = setInterval(()=>{
console.log(n)
// 2.n++
n++;
if(n>200){
// 3.清除定时器
clearInterval(timer);
}
},20)
}
// 执行函数
count();
// 此时面临一个问题：
// 当页面切换的时候，浏览器为了保证自己的效率，会将定时器设置成1秒走一次.
// 当然,当切换回来以后,定时器又会按照之前的20ms走.
// 这个时候,浏览器暴露一个api,用于让我们发现这个问题.
document.addEventListener("visibilitychange",()=>{
if(document.hidden){
console.log("页面切换")
}else{
console.log("页面可见")
}
})
</script>
</body>
animate(keyframes,options)
JS 实现动画，不使用CSS。
keyframes：一个数组，里面放的是关键帧。
options：对象，里面是关于动画的配置。
<body>
<div class="ball"></div>
<script>
// JS 实现动画，不使用CSS
// animate(keyframes,options)
// keyframes：关键帧。
// options：关于动画的配置。
// 需求：鼠标点击，点击到哪里，小球移动到哪里.
// 实现思路：
// 1.1 获取鼠标点击的【x,y】坐标。
// 1.2 通过动画，配合使用【transform:translate(x,y)】，让小球移动。
// 1.3 为了让小球连续的移动，我们需要获取小球的起始位置。
// 获取起始位置的方法，可以用【getBoundingClientRect】
// obj.left + obj.width/2;就是离着左边的距离。同理，离着上面的也是。
// 1.获取一个小球
const ball = document.querySelector(".ball");
// 2.监听鼠标的点击
window.addEventListener("click",(e)=>{
// 获取鼠标点击的x,y坐标
const x = e.clientX;
const y = e.clientY;
// 调用移动
move(x,y)
})
// 3.移动方法
function move(x,y){
// 3.1 获取小球的起始位置
const ballRect = ball.getBoundingClientRect();
const initX1 = ballRect.left + ballRect.width/2;
const initY1 = ballRect.top + ballRect.height/2;
// 3.3 性能优化，把之前的动画清除。
ball.getAnimations().forEach((animation)=>{
animation.cancel();
})
// 3.2 执行动画
ball.animate([
{
transform:`translate(${initX1}px,${initY1}px)`
},
{
transform:`translate(${x}px,${y}px)`
}
],{
duration:1000, //动画运动的时间
fill:"forwards" //让动画，停留在最后的位置，而不是再返回回去。
})
}
</script>
</body>
<style>
.ball{
width:50px;
height:50px;
background:red;
border-radius:50%;
}
</style>
7569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
