动画原理与setInterval函数封装

最新推荐文章于 2023-12-23 12:45:46 发布
最新推荐文章于 2023-12-23 12:45:46 发布
阅读量152 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42802725/article/details/113900314
版权

在这里插入图片描述
如图所示，本次想做盒子的定时移动，第一个盒子以每50ms,第二三个盒子以每10ms向左移动一个像素。
样式上需将盒子绝对定位，以便后续能改变盒子的left值使其移动。
javascript上需监听其offsetleft值，并通过left修改其位置。
注意一般情况下clearInterval都写在setInterval中，以便定时检测是否达到取消定时器的条件。
代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.w{
				width: 100px;
				height: 60px;
				margin-top: 20px ;
				position:absolute;
				left: 0;
			}
			.one{
				background-color: aqua;
				top: 20px;
			}
			.two{
				background-color: aquamarine;
				top: 100px;
			}
			.three{
				background-color: #00FFFF;
				top: 180px;
			}
		</style>
	</head>
	<body>
		<div class="one w">1</div>
		<div class="two w">2</div>
		<div class="three w">3</div>
		<script>
			var one=document.querySelector('.one');
			var two=document.querySelector('.two');
			var three=document.querySelector('.three');
			var time=setInterval(function(){
				one.style.left=one.offsetLeft+1+'px';
				if(one.offsetLeft>=400){
					clearInterval(time);
				}
			},30);
			function kind(ele,tim){
				var timer=setInterval(function(){
					ele.style.left=ele.offsetLeft+1+'px';  
/*ele.offsetLeft>=400 ele.style.left>='400px' */
					if(ele.offsetLeft>=400){
						clearInterval(timer);
					} 
				},tim);
			}
			kind(two,10);
			kind(three,10);
		</script>
	</body>
</html>

问题
ele.style.left>=‘400px’
不知道此不等式哪里有问题。。
按理来说如果一开始有通过行内样式给left赋值，后期应该能通过ele.style.left查询到其值。。。

陈婷婷婷婷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
定时器与函数封装
LuckyGirl_L的博客
12-19 1152
定时器与函数封装 1.定时器的分类 （1）setTimeout延迟执行：延迟某个特定的时间开始执行，只执行一次。 ​ 语法：setTimeout（函数，间隔时间（ms）） ​ 场景：一般用于广告 （2）setInterval间歇执行（或重复执行）：隔某个时间就执行一次，执行无数次。 ​ 语法：setInterval（函数，间隔时间（ms）） ​ ...
setInterval定时器封装(settimeout\requestAnimationFrame),代码抽离，浏览器切换后定时器停止执行
eadela的博客
04-27 1119
需求： 点击按钮，请求成功返回后，置灰60秒倒计时，不允许点击 碰到问题： 1、页面有个loading，在loading为true时，加载超过1秒后，计数不连贯 2、代码写到一个文件中，耦合严重 3、浏览器切换后定时器停止执行，浏览器切换tab页面后，切换回去，仍有计数，并停止 解决方法 1、在loading结束后，再开始计数 2、抽离代码，模块化 3、浏览器监听事件 document.addEventListener(‘visibilitychange’,()=>{}) 浏览器标签页被隐藏或显示的
setInterval多组定时器函数封装传参
weixin_30588675的博客
12-21 280
昨天的例子是针对只有单个函数运行的结果，但是实际中可能会有多组函数这样同时进行，那么这个时候就要对函数进行封装传参，来实现效果了。就还拿昨天的例子来说吧，昨天写的例子实现的效果是点击按钮，让div向前移动，那么今天就扩展一下，点击按钮让div向后移动，想要实现这个效果，就必须要传参了，来看代码： css代码 <style> #box{width:50px;height:50p...
js setInterval
机智大头
05-11 851
js setInterval使用 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 语法 setInterval(code,interval) ①可以有第三个参数，第三个参数作为第一个参数（函数）的参数 ②第一个参数是函数，有三种形式： 1、传函数名，...
web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图
翟浩浩Android专栏
10-16 1170
文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout setInterval(); 定时执行函数setInterval无限次的执行，要通过clearInterva...
JS封装动画与动态弹球
12-14
在这个过程中，我们将深入探讨JavaScript动画原理、模块化编程的概念以及如何将这些理论应用于创建一个动态弹球游戏。 首先，JavaScript动画主要依赖于改变元素的CSS属性，如位置、大小或透明度，然后利用浏览器的...
原生js封装运动框架的示例讲解
11-29
在JavaScript编程中，运动框架是实现元素平滑动画的...这是一个学习和理解JavaScript动画原理的好起点，但实际项目中可能还需要更复杂的功能和优化。不断学习和实践，提升自己的编程技巧，是成为一个优秀开发者的关键。
timeline:管理动画的时间轴，封装了raf
05-01
raf的使用避免了过度使用setTimeout或setInterval可能导致的性能问题和不必要的渲染延迟，因为它与浏览器的渲染循环同步。 "timeline"库或模块的出现，是为了简化raf的使用，提供更高级别的动画控制功能。通常，它...
HTML5 Canvas太阳燃烧动画特效
06-24
10. **封装与模块化** 最后，为了代码的可维护性和重用性，通常会将这些功能封装成一个自定义组件或类，以便在不同的项目中复用。 综上所述，“HTML5 Canvas太阳燃烧动画特效”涉及到的知识点包括Canvas的基本绘图...
jQuery数字滚动播放动画特效
06-24
3. **动画循环**：使用`setInterval()`或`setTimeout()`函数来周期性地更新数字。每次迭代中，数字会增加一个特定的值，直到达到目标数字。 4. **缓动函数（Easing Function）**：为了使滚动效果更自然，我们可以...
js封装定时器 (同一页面多处引用)
sugang666的博客
01-28 2464
demo1   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;JS实现倒计时(天数,时,分,秒)&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&
js基础之setTimeout与setInterval原理分析
夕山雨的博客
07-06 5607
基本原理 setTimeout(func, delay, args)：设置超时调用，经过delay时间后，将func函数加入到执行队列中准备调用。如果队列为空，立即执行该函数，否则等待线程空闲再执行。 setInterval(func, interval, args)：设置 ...
setInterval(fn,delay)的工作原理以及小特点
wzch333的博客
10-18 2739
一.浏览器执行事件特点 1.Js引擎只有一个线程,迫使异步事件只能加入到队列去等待执行. 2.在异步执行时,setTimeout与setInterval有着本质上的区别. 3.如果定时器被正在执行的代码阻塞了,它将会进入队列的尾部去等待执行下一次可能执行的时间出现,有可能超过它设定的延迟时间. 4.如果setInterval类的间隔定时器回调函数执行时间很长,长于时间间隔,定时器就有可能无
深入理解 JavaScript 中的 setInterval 函数
最新发布
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
12-23 954
JavaScript 中的 setInterval() 函数是一个关键工具，它允许开发者按照设定的时间间隔重复执行特定的代码。这个函数对于处理定时任务、实现动态内容更新以及执行周期性操作非常有用。本文将深入探讨 setInterval() 的语法、用法、性能考量以及最佳实践，帮助你更好地理解和运用这一功能。
【捣鼓】用setTimeout实现setInterval与clearInterval
Jamcy123的博客
04-05 1160
如果有更好的办法或者文章中的办法有错误欢迎讨论与交流！ 如果觉得太罗嗦了可以直接跳到其他方法与试着解题的末尾看代码。
JavaScript定时器原理分析
weixin_34072637的博客
11-26 133
JavaScript中的定时器大家基本在平时的开发中都遇见过吧，但是又有多少人去深入的理解其中的原理呢？下面我们就来分析一下定时器的实现原理。 一、储备知识 在我们在项目中一般会遇见过这样的两种定时器，第一种是setTimeOut,第二种是setInterval，这两种定时器有如下的区别： 1、setTimeout允许设置一个超时对象，超时后执行这个对象，但是只执行一次，无周期 2、s...
消息提示对象封装、递归实现 setTimeout 模拟 setInterval 效果、递归实现深拷贝（简版）、节流或防抖—鼠标滑过盒子显示文字、页面打开，记录上一次的视频播放位置（节流）—JS进阶练习
weixin_70320000的博客
03-03 297
消息提示对象封装、递归实现 setTimeout 模拟 setInterval 效果、递归实现深拷贝（简版）、节流或防抖—鼠标滑过盒子显示文字、页面打开，记录上一次的视频播放位置（节流）—JS进阶练习
定时器setTimeout setInterval、运动函数封装06
weixin_52597660的博客
12-21 295
day06 定时器 1.定时器 1.1 定时器的分类 setTimeout：延迟定时器 使用场景：广告弹窗 语法：setTimeout(函数,时间ms) 延迟某个时间执行函数一次 setInterval：间歇执行定时器 使用场景:轮播图，倒计时，抽奖 语法：setInterval(函数，时间) 间隔某个时间就执行函数一次 1.2 定时器使用 setTimeout <div>广告</div> <script> var oDiv = docum
封装setTimeout，setInterval定时器
weixin_51042892的博客
03-07 309
function timeout(delay=1000){ return new Promise(resolve=>setTimeout(resolve,delay) ) } timeout(4000).then(value=>{ console.log(1); return timeout(2000) }).then(value=>{ .
setInterval函数来实现倒计时动画
05-25
可以使用`setInterval`函数来实现倒计时动画，具体实现方法如下： 首先，需要设置一个初始时间和一个倒计时结束时间。然后，使用`setInterval`函数循环执行一个函数，该函数将会在每个一定的时间间隔内被调用。 在该函数内部，可以获得当前时间，并计算出还有多少时间剩余。然后，根据剩余时间来更新倒计时的显示，并在时间到达结束时间时停止计时器。 以下是一个简单的示例代码： ```javascript // 设置初始时间和结束时间 const startTime = new Date().getTime(); const endTime = startTime + 100000; // 获取页面中的倒计时元素 const countdown = document.querySelector('.countdown'); // 定义倒计时函数 function updateCountdown() { const currentTime = new Date().getTime(); const remainingTime = endTime - currentTime; // 计算剩余时间的分钟和秒数 const minutes = Math.floor(remainingTime / (1000 * 60)); const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 更新倒计时的显示 countdown.innerHTML = `${minutes}:${seconds.toString().padStart(2, '0')}`; // 如果时间到达结束时间，停止计时器 if (remainingTime <= 0) { clearInterval(countdownInterval); countdown.innerHTML = 'Time Up!'; } } // 使用setInterval函数调用倒计时函数 const countdownInterval = setInterval(updateCountdown, 1000); ``` 在该示例代码中，我们首先获取了页面中的倒计时元素，并设置了初始时间和结束时间。然后，我们定义了一个`updateCountdown`函数，在函数内部计算剩余时间并更新倒计时的显示。最后，我们使用`setInterval`函数来循环调用该函数，直到时间到达结束时间时停止计时器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值