Das Beispiel in diesem Artikel beschreibt die JS-Implementierung der Erzeugung von Ringen, die größer und kleiner werden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Hier wird JavaScript verwendet, um einen Kreis zu erzeugen, der größer und kleiner wird. Dies ist ein gutes Beispiel für die Untersuchung, wie man JavaScript zum Generieren von Animationseffekten verwendet.
Der Betriebseffekt ist wie folgt:
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<title>JS圆环</title>
<script type="text/javascript">
var n=30;
var r=100;
var a=true;
window.onload=function ()
{
var oDiv1=document.getElementById('div1');
var aDiv=[];
var oDiv=null;
var j=0;
var i=0;
for(i=0;i<n;i++)
{
oDiv=document.createElement('div');
aDiv.push(oDiv);
document.body.appendChild(oDiv);
}
calcDrg();
function calcDrg()
{
for(i=0;i<n;i++)
{
var degress=360*i/n+j;
var a=Math.sin(degress*Math.PI/180)*r;
var b=Math.cos(degress*Math.PI/180)*r;
aDiv[i].style.left=oDiv1.offsetLeft+b+'px';
aDiv[i].style.top=oDiv1.offsetTop-a+'px';
}
}
setInterval(function (){
j++;
var s=0.3;
a?r-=s:r+=s;
if(r<=0 || r>=100)
{
a=!a;
}
calcDrg();
}, 10);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
