JS基础——定时器的应用2

最新推荐文章于 2022-04-26 16:27:21 发布

Crazy ProMonkey

最新推荐文章于 2022-04-26 16:27:21 发布

阅读量1.8k

点赞数 1

分类专栏： BOM DOM 前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/fleehom/article/details/121182271

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

DOM

4 篇文章 0 订阅

订阅专栏

BOM

2 篇文章 0 订阅

订阅专栏

补充：

继上一篇定时器的功能之后，本篇将对上篇应用的功能加以扩充。具体增加的功能有：

新增一个向左移动的按钮，点击该按钮后，物体会向左移动

因向左和向右移动二者的功能大同小异，所以设计一个公共的移动函数方法move()，使其轻松实现向左和向右移动的功能

因向左和向右的方向取决于输入的speed的速度值的正负，正值向左，负值向右。但该方法不是很好，需要额外输入速度的正负号，因此需要设计一个方法，可以实现speed的输入值一直为正，但仍可以实现向左和向右移动

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				let box1 = document.getElementById("box1")
				let btn01 = document.getElementById("btn01")
				let btn02 = document.getElementById("btn02")
				
				btn01.onclick = function(){
					move(box1, 800, 10)
				}
				
				btn02.onclick = function(){
					move(box1, 0, 10)
				}
			}
			
			let timer
			// 尝试创建一个可以执行简单动画的函数
			function move(obj, target, speed){
				// 关闭上一个定时器
				clearInterval(timer)
				// 获取元素目前的位置
				let current = parseInt(getStyle(obj,"left"))
				// 判断速度的正负值
				if (current > target){
					speed = -speed
				}
				// 开启一个定时器，用来执行动画效果
				timer = setInterval(function(){
					// 获取box1的原来的left值
					let oldValue = parseInt(getStyle(obj,"left"))
					let newValue = oldValue + speed
					// 判断newValue是否大于800
					if (speed < 0 && newValue < target || speed > 0 && newValue > target){
						newValue = target
					}
					obj.style.left = newValue + "px"
					// 当元素移动到800px时，使其停止执行动画
					if (newValue == target){
						clearInterval(timer)
					}
				}, 30)
			}
			
			// 定义一个函数，用来获取指定元素的当前的样式
			function getStyle(obj, name){
				if (window.getComputedStyle){
					return getComputedStyle(obj, null)[name]
				}else{
					return obj.currentStyle[name]
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01" type="button">点击按钮以后box1向右移动</button>
		<button id="btn02" type="button">点击按钮以后box1向左移动</button>
		
		<br><br>
		<div id="box1"></div>
		<div style="width: 0px; height: 1000px; border-left: 1px solid black; position: absolute; top: 0px; left: 800px;"></div>
	</body>
</html>

封装后的公共移动函数方法如下，可以有效减少代码的高重复率：

let timer
           // 尝试创建一个可以执行简单动画的函数
           function move(obj, target, speed){
               // 关闭上一个定时器
               clearInterval(timer)
               // 获取元素目前的位置
               let current = parseInt(getStyle(obj,"left"))
               // 判断速度的正负值
               if (current > target){
                   speed = -speed
               }
               // 开启一个定时器，用来执行动画效果
               timer = setInterval(function(){
                   // 获取box1的原来的left值
                   let oldValue = parseInt(getStyle(obj,"left"))
                   let newValue = oldValue + speed
                   // 判断newValue是否大于800
                   if (speed < 0 && newValue < target || speed > 0 && newValue > target){
                       newValue = target
                   }
                   obj.style.left = newValue + "px"
                   // 当元素移动到800px时，使其停止执行动画
                   if (newValue == target){
                       clearInterval(timer)
                   }
               }, 30)
           }

设计的一个思想，可以只输入速度speed正值，就可以实现物体向左向右移动：

// 获取元素目前的位置
               let current = parseInt(getStyle(obj,"left"))
               // 判断速度的正负值
               if (current > target){
                   speed = -speed
               }

结果展示：

喜欢小编的关注、点赞走一波呦，后期会不定期分享更多Python、JS和前端相关知识

Crazy ProMonkey

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS基础——定时器的应用2

补充：继上一篇定时器的功能之后，本篇将对上篇应用的功能加以扩充。具体增加的功能有：新增一个向左移动的按钮，点击该按钮后，物体会向左移动因向左和向右移动二者的功能大同小异，所以设计一个公共的移动函数方法move()，使其轻松实现向左和向右移动的功能因向左和向右的方向取决于输入的speed的速度值的正负，正值向左，负值向右。但该方法不是很好，需要额外输入速度的正负号，因此需要设计一个方法，可以实现speed的输入值一直为正，但仍可以实现向左和向右移动代码演示：<!DOCTYPE
复制链接

扫一扫