js运动（定时器）

最新推荐文章于 2023-07-06 16:22:02 发布

转载最新推荐文章于 2023-07-06 16:22:02 发布 · 238 阅读

收录于

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单动画案例。通过设置定时器，使页面上的元素按照逐渐加速的速度向右下角移动，当元素到达指定位置时停止定时器。此案例展示了如何利用JavaScript操作DOM元素的样式属性及定时器的使用方法。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js定时器</title>
</head>
<body>
   
</body>
<script>

 var p = document.createElement('p');
 document.body.append(p)
 p.style.width="100px";
 p.style.height='100px'
 p.style.background="red";
 p.style.position="absolute";
 p.style.left='0';
 p.style.top='0';
 var speed = 1;
 var timer =setInterval(function () {
 	 speed+=1;
 	 p.style.left=parseInt(p.style.left)+speed+"px";
 	 p.style.top=parseInt(p.style.top)+speed+"px";
 	  if(parseInt(p.style.left)>200 && parseInt(p.style.top)>200){
          clearInterval(timer)//停止定时器
 	  }
 },30)

    
</script>
</html>