Artikel ini memperkenalkan anda kepada animasi yang dilaksanakan dalam javascript. Apabila anda mengklik butang mula, div akan bergerak ke kanan Apabila anda mengklik berhenti, div akan berhenti bergerak. Sila lihat kod di bawah.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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>Penerangan kod:
1.window.onload=function(){}, apabila kandungan dokumen dimuatkan sepenuhnya, laksanakan kod dalam fungsi.
2.var mydiv=document.getElementById("mydiv"), dapatkan elemen yang nilai atribut idnya ialah mydiv.
3.var start=document.getElementById("start"), dapatkan elemen yang atribut idnya hi ialah mula.
4.var stopmove=document.getElementById("stopmove"), dapatkan elemen yang nilai atribut idnya ialah stopmove.
5.mydiv.style.left=x+"px", tetapkan nilai atribut kiri div.
6.start.onclick=function(){}, daftarkan fungsi pemprosesan acara onclick untuk elemen mula.
7.clearInterval(flag), menghentikan fungsi pemasa, dan satu pihak mengklik butang mula beberapa kali untuk menyebabkan kesan tindanan.
8.flag=setInterval(move,20), mula bergerak.
Kesan animasi ringkas di atas yang dilaksanakan oleh javascript asli ialah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi rujukan kepada anda, dan saya juga berharap semua orang akan menyokong Script Home.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
