【今日文章】:Web浏览器的部分事件

【今日文章】:Web浏览器的部分事件

  • visibilitychange
  • animate(keyframes,options)

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>

你可能感兴趣的:(前端,javascript,vue.js,css3,html5)