JaveScript之运动框架

最新推荐文章于 2019-05-06 20:44:38 发布

原创最新推荐文章于 2019-05-06 20:44:38 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端开发 #框架

js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种利用JavaScript中的定时器实现HTML元素自动水平移动的方法。通过设置定时任务，使一个红色正方形块从页面左侧开始，逐渐移动至300像素位置时停止。此方法适用于网页动画初学者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运动框架，运用定时器和函数构建运动框架，具体知识看注释

<!DOCTYPE HTML>

<html>

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50px;
left: 0px;
}
</style>
<script>

var timer = null;

//先把定时器设置为空

function startMove() {
var oDiv = document.getElementById('div1');

clearInterval(timer);
timer = setInterval(function() {
var speed = 1;

//把速度存在speed变量中，

if(oDiv.offsetLeft >= 300) {

//当移动到300px时，停止运动

clearInterval(timer);
} else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}

</script>
</head>

<body>
<input id="btn1" type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>

</html>

运动框架暂时用offset，这个offset是有问题的，稍后的博客中解决这个问题