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

补充：

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

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

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

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

代码演示：

	
		
		
		
			*{
				margin: 0;padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				position: absolute;
			}
		
		
	
	
		点击按钮以后box1向右移动
		点击按钮以后box1向左移动
		
		


		
		
	

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

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和前端相关知识