移动页面元素，先从原点出发，向左移动20px，再向上移动50，最后再向左移30px，请把运动路径画下来

最新推荐文章于 2022-06-22 14:14:50 发布

lucky_girl_girl

最新推荐文章于 2022-06-22 14:14:50 发布

阅读量358

点赞数

分类专栏：笔记文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/lucky_girl_girl/article/details/123545953

版权

笔记专栏收录该内容

87 篇文章 0 订阅

订阅专栏

一.用callback形式回调

const walk=(target,direction,distance,callback)=>{
	setTimeout(()=>{
		//parseInt()   10代表只能是10的倍数
		let currentLeft=parseInt(target.style.left,10)
		let currentTop=parseInt(target.style.top,10)
		console.info('currentLeft',currentLeft,'distance',distance,'currentTop',currentTop)
		const shouldFinish=(direction==='left'&&currentLeft===-distance)||(direction==='top'&&currentTop===-distance)
		//本次移动结束，继续下一次移动
		if(shouldFinish){
			callback&&callback()
		}else{
			if(direction==='left'){
				currentLeft--
				target.style.left=`${currentLeft}px`
			}else if(direction==='top'){
				currentTop--
				target.style.top=`${currentTop}px`
			}
			walk(target,direction,distance,callback)
		}
		
	},1000)
}

//二用Promise方案解决

const walkExtend=(target,direction,distance)=>
new Promise((resolve,reject)=>{
	const innerWalk=()=>{
		setTimeout(()=>{
			let currentLeft=parseInt(target.style.left,10)
			let currentTop=parseInt(target.style.top,10)
			console.info('currentLeft',currentLeft,'distance',distance,'currentTop',currentTop)
			const shouldFinish=(direction==='left'&&currentLeft===-distance)||(direction==='top'&&currentTop===-distance)
			//本次移动结束，继续下一次移动
			if(shouldFinish){
				//任务结束
				resolve()
			}else{
				if(direction==='left'){
					currentLeft--
					target.style.left=`${currentLeft}px`
				}else if(direction==='top'){
					currentTop--
					target.style.top=`${currentTop}px`
				}
				innerWalk()
			}
		},20)
	}
	innerWalk()
})

三.html调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./yibu.js"></script>
	</head>
	<style>
		#man{
			width:10px;
			height:10px;
			background-color: skyblue;
		}
	</style>
	<body>
		<div id="man"></div>
		<script>
		    window.addEventListener("load",function(){
				const target=document.querySelectorAll('#man')[0]
				target.style.cssText=`position:absolute;left:0px;top:0px;`
				//用callback解决
				walk(target,'left',10,()=>{
					walk(target,'top',50,()=>{
						walk(target,'left',30,Function.prototype)
					})
				})
				//用promise解决
				walkExtend(target,'left',20).then(()=>
					walkExtend(target,'top',50)).then(()=>
						walkExtend(target,'left',30))
				//用Generator解决
				function *taskGenerator(){
					yield walkExtend(target,'left',20)
					yield walkExtend(target,'top',50)
					yield walkExtend(target,'left',30)
				}
				const gen=taskGenerator()
				gen.next()  //要手动执行next函数
				//用async await解决
				const task=async function(){
					await walkExtend(target,'left',20)
					await walkExtend(target,'top',50)
					await walkExtend(target,'left',30)
				}
				task()
			})
		</script>
	</body>
</html>

缺点：跑出屏幕外并没有做处理。简化版本初始值都设为0

lucky_girl_girl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动页面元素，先从原点出发，向左移动20px，再向上移动50，最后再向左移30px，请把运动路径画下来

一.用callback形式回调const walk=(target,direction,distance,callback)=>{ setTimeout(()=>{ //parseInt() 10代表只能是10的倍数 let currentLeft=parseInt(target.style.left,10) let currentTop=parseInt(target.style.top,10) console.info('currentLeft',currentLef
复制链接

扫一扫