Cet article vous présente une animation implémentée en javascript. Lorsque vous cliquez sur le bouton Démarrer, le div se déplacera vers la droite. Lorsque vous cliquez sur Arrêter, le div cessera de bouger. Si vous cliquez à nouveau, il continuera à se déplacer. Veuillez consulter le code ci-dessous :
<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>
Rendu :
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
