This article introduces you to an animation implemented in javascript. When you click the start button, the div will move to the right. When you click stop, the div will stop moving. If you click again, it will continue to move. Please see the code below:
<html>
<head>
<meta charset="gb2312">
<head>
<title>javascript实现的简单动画</title>
<style type="text/css">
#mydiv
{
width:50px;
height:50px;
background-color:green;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload=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.onclick=function()
{
clearInterval(flag);
flag=setInterval(move,20);
}
stopmove.onclick=function()
{
clearInterval(flag);
}
}
</script>
<body>
<input type="button" id="start" value="开始运动" />
<input type="button" id="stopmove" value="停止运动" />
<div id="mydiv"></div>
</body>
</html>
Rendering:
The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
