<!DOCTYPE html>
<html>
<head>
< charset=\" utf-8\">
<head>
< > 实现的简单动画</ >
<style type=\"text/css\">
#mydiv
{
width:50px;
height:50px;
background-color:green;
position:absolute;
}
</style>
< type=\"text/ \">
window. =function()
{
var mydiv=document.getElementById(\"mydiv\");
var start=document.getElementById(\"start\");
var stopmove=document.getElementById(\"stopmove\");
var x=0;
var flag;
function move()
{
x=x+1;
mydiv.style.left=x+\"px\";
}
start. =function()
{
clearInterval(flag);
flag=setInterval(move,20);
}
stopmove. =function()
{
clearInterval(flag);
}
}
</ >
<body>
<input type=\"button\" id=\"start\" value=\"开始运动\" />
<input type=\"button\" id=\"stopmove\" value=\"停止运动\" />
<div id=\"mydiv\"></div>
</body>
</html>
代码解释：
- window. =function(){}，当文档内容完全加载完毕再去执行函数中的代码。
- var mydiv=document.getElementById("mydiv")，获取id属性值为mydiv的元素。
- var start=document.getElementById("start")，获取id属性hi为start的元素。
- var stopmove=document.getElementById("stopmove")，获取id属性值为stopmove的元素。
- mydiv.style.left=x+"px"，设置div的left属性值。
- start. =function(){}，为start元素注册 事件处理函数。
- clearInterval(flag)，停止定时器函数，一方多次单击开始按钮造成叠加效果。
- flag=setInterval(move,20)，开始运动。
继续阅读与本文标签相同的文章
上一篇 :
WeWork 跌落神坛，联合办公们出路何在？
下一篇 :
区块链技术在金融行业的应用探索
-
辉煌的背后，华为何时补齐短板？任正非给出新目标
2026-05-14栏目： 教程
-
全球首条“5G自动微公交”示范线路乌镇开通
2026-05-14栏目： 教程
-
未来十年，最为吃香的4个大学专业，毕业后就是香饽饽！
2026-05-14栏目： 教程
-
还不会制作填充地图，试试这种方法，2分钟搞定，让你秒变大神
2026-05-14栏目： 教程
-
顺丰自研机器人惊艳亮相，化身“快递小哥”亮绝活，盯上万亿市场
2026-05-14栏目： 教程