Dieser Artikel stellt Ihnen eine in Javascript implementierte Animation vor. Wenn Sie auf die Schaltfläche „Start“ klicken, bewegt sich das Div nach rechts. Wenn Sie auf „Stopp“ klicken, wird die Bewegung des Divs gestoppt. Wenn Sie erneut klicken, bewegt es sich weiter. Bitte sehen Sie sich den Code unten an:
<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:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.
